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

Solved
SneakerSafe
Explorer
53 0 14

Hi

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

SneakerSafe_0-1611940831918.png

And this is my website:

SneakerSafe_1-1611940869179.png

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

Thanks (website is sneakersafe.co.uk)

0 Likes
Spinturnix
Shopify Expert
64 17 14

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!

0 Likes
SneakerSafe
Explorer
53 0 14

Hi @Spinturnix

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

SneakerSafe_0-1612054282883.png

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

0 Likes
Spinturnix
Shopify Expert
64 17 14

This is an 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
Explorer
53 0 14

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 

0 Likes