Shopify Variants

Question

Wondering if there is any way to assign variants to custom radio inputs? I'd like to set up tiered shipping with different rates for 2 Day, 3 Day and Standard shipping. I can do this with variants but the drop down won't work for me.I'd like to have date information and a datepicker in order to choose preferred shipping dates and have it all appear on a modal with the rest of the delivery options. Line item properties won't work because as far as I know they cannot affect price. So I wondered, if I created different variants for the different shipping rates, could I direct them to my own radio buttons? I've attached a screenshot of what I've got so far. The 3 radio buttons on the right are what I'd like to use rather than the built in Shopify drop down. Thanks in advance for your help.

Answer 1

I would suggest checking out this discussion on the Shopify wiki: Mixing dropdown and radio buttons on product page

Caroline posted this answer:

That's a difficult one, because you need to use option_selection.js to 'descramble' variants into options, and option_selection.js generates drop-downs, one for each option. Personally, I would keep that.

You can add radio buttons for your colors — while keeping your Color drop-down on the page and hide it with CSS — then update the selected option in the drop-down when a radio button is checked.

In the following example, anchor elements are used instead of radio buttons, but the method is the same: http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify

The lastest version of that color swatch tutorial is available on the Shopify Wiki here, and I've used it before with success (although only with the default code, not radio buttons).

If that doesn't work for you, I think you're looking at a much more complicated thing to implement... See these other discussions about using radio buttons for variants I found on the Shopify wiki:

• Radio Buttons for product variations?
• Change to Radio Buttons
• Use radio button instead of drop down for Multi-Select
• product variants as radio buttons javascript

EDIT:

In comments below:

...still unsure if I can assign the buttons to custom variant titles using javascript elements.

I had a play around with this idea, and I'm not sure if this is exactly what you are after, but it might give you some ideas on where to start.

My variants are:

• Standard Shipping
• 3 Day Express Shipping. Additional $15
• 2 Day Express Shipping. Additional $25

I added a span below the variants in product.liquid where I display the estimated delivery date, and some jQuery that updates the estimated delivery date text in the span depending on the shipping date selected in the datepicker.

I used the code from Caroline Schnapp in this discussion to create radio buttons for the variants (the same as you did). I modified the code slightly by adding a Line Item Property in a hidden input field just before the end of the form:

<input type="hidden" id="delivery-date" name="properties[DeliveryDate]" /> 

And added 2 lines to the end of this jQuery function to update the hidden line item property when a radio button is clicked:

jQuery("input[type='radio']").click(function() {
  var variant_price = jQuery(this).attr("data-price");
  jQuery(".price-field span").html(variant_price);
  var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
  jQuery(".price-field del").html(variant_compare_at_price);

  var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
  jQuery("#delivery-date").val(delivery_date);
});

Then when the user clicks the Purchase button to add the item to their cart, it shows the variant and line item property something like this:

Not sure if that's exactly what you're after, but hopefully some of it is helpful!

EDIT 2:

Here's the gist: https://gist.github.com/stephsharp/6865599

Answer 2

Also note that there is no reason to use option_selector.js code. Shopify hands off all the product information including the options and variants as JSON. You are free to build any data structure you want, assign any events you want and generally go about client-side coding as you need to go. Without using that bit of code. It is merely a suggestion about how one can do things with Shopify. It gets widespread use, but it is not the end all, be all.

Answer 3

We recently added the ability to get variant options and values in Liquid so you're not forced to render radio or select elements with JS. Check out the updated docs at https://help.shopify.com/themes/liquid/objects/product#product-options_with_values