Show all variants at once on product page instead of drop down menu (debut theme)

[SneakerSafe]

Hi

Is it possible to display all variants on the product page instead of a drop down menu? Here's an example

And this is my website:

I'd like the drop down menu removed and the variants displayed all at the same time

Thanks (website is sneakersafe.co.uk)

[Spinturnix]

Hi @SneakerSafe,

Yes, it's possible to display product options like your example. This will require a fair amount of custom work, but I'll help you get started with the functional part.

• In your admin dashboard, go to Online Store > Themes.
• If the theme you wish to edit is currently Published, click Actions > Duplicate. Never edit the code of the published theme.
• On the duplicated theme, click Actions > Edit Code.
• Now in the editor, find Snippets > product-template.liquid
• In product-template.liquid, find this element (In my test theme, this was on line 155): 

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
  {% for value in option.values %}
    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
  {% endfor %}
</select>​

• And replace it with this: 

<div class="radio-group">
  {% for value in option.values %}
    <label for="{{ value | handleize }}">{{ value }}</label>
    <input id="{{ value | handleize }}" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" type="radio" value="{{ value | escape }}" data-index="option{{ forloop.index }}" name="{{ option.name }}"{% if option.selected_value == value %} checked="checked"{% endif %} />
  {% endfor %}
</div>​

• Click save, then preview.

It won't look like your example at this point, but it *should* function the same.

Now you are free to style however you'd like. Let me know if you need more help!

[SneakerSafe]

Hi @Spinturnix

Thanks for your help, unfortunately it doesn't work for me and this is what it looks like

It carries on vertically like this until the add to cart button. Also the prices disappear for all variants when selected except for the first one

[Spinturnix · Accepted solution]

Hey @SneakerSafe,

There was an oversight with the option indexing in my first post, use this snippet instead: 

<div class="radio-group">
  {% assign optionIndex = forloop.index %}
  {% for value in option.values %}
    <label for="{{ value | handleize }}">{{ value }}</label>
    <input id="{{ value | handleize }}" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" type="radio" value="{{ value | escape }}" data-index="option{{ optionIndex }}" name="{{ option.name }}"{% if option.selected_value == value %} checked="checked"{% endif %} />
  {% endfor %}
</div>

As I mentioned in my first post, this is only the functional part. Meaning the appearance will not look like your example without custom CSS.

[SneakerSafe]

Thank you for your help, do you have an idea where I have to go for the customisation? Do I hire an expert or install an app? Or either?

Thanks @Spinturnix