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):

​

• And replace it with this:

  {% for value in option.values %}
    
    
  {% endfor %}

​

• 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]

Hey @Timito ,

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

  {% assign optionIndex = forloop.index %}
  {% for value in option.values %}
    
    
  {% endfor %}

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.

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.

[sarahkostick]

// RESOLVED THIS MYSELF – Thank you for reading & apologies.

Hello! I want to do this for my shop as well. Having items out of stock and in a way “hidden” isn’t great for my shop as we grow.

I was following your instructions but unfortunately can’t even find the product-template.liquid file under “Snippets” or “Sections”. I’ve attached a screenshot with where it should be but isn’t. I’m using the Spotlight theme if this affects anything. I also removed apps I was testing to adjust the layout of my shop.

I would absolutely appreciate any further support you can offer for this! I’d love for the sizes in my shop to be laid out as you set with your code. Thank you & appreciation in advance!