FROM CACHE - en_header

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

Solved
Timito
Pathfinder
93 1 37

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)

Accepted Solution (1)

Accepted Solutions
Spinturnix
Shopify Expert
68 17 15

This is an 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.

View solution in original post

Replies 9 (9)
Spinturnix
Shopify Expert
68 17 15

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
Pathfinder
93 1 37

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

Spinturnix
Shopify Expert
68 17 15

This is an 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
Pathfinder
93 1 37

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
New Member
4 0 0

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
Tourist
14 0 2

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
Shopify Expert
68 17 15

Hey @harrisness,

 

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

 

Spinturnix_0-1641331544672.png

 

harrisness
Tourist
14 0 2

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

Spinturnix
Shopify Expert
68 17 15

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.