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

[Timito]

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 @Timito,

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!

[Timito]

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 @Timito,

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.

[Timito]

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 

[GarethVN]

HI So I have been trying to get this correct but I don't need the radio buttons I need the variants to show as individual buttons below each other. How do I do this?

[harrisness]

Hi I am trying to replicate this, however, there is no product-template.liquid page of code to edit, I tried to mess with the product.liquid instead, but no success. 

            <select name="id" id="productSelect" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}

                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>

This is what the select code looks like on the product.liquid page but when I replace it with the code @Spinturnix posted it does not work. Any help would be appreciated, thank you! 

[Spinturnix]

Hey @harrisness,

The "product-template.liquid" file is under the "Sections" tab. Also worth mentioning this was for the Debut theme specifically.

[harrisness]

Would you know how to do it in the minimal theme by any chance?

[Spinturnix]

Hey @harrisness,

I don't have specific code snippets for you, but the implementation should be similar. We're basically just replacing the default select and option elements with radio inputs.

To get more/faster help, I recommend submitting a new topic with your specific needs and details.

If nobody is able to solve this within a few days, tag me in the new topic and I'll help you there.