Shopify themes, liquid, logos, and UX
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)
Solved! Go to the solution
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.
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.
<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>
<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>
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!
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
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.
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
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?
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!
Hey @harrisness,
The "product-template.liquid" file is under the "Sections" tab. Also worth mentioning this was for the Debut theme specifically.
Would you know how to do it in the minimal theme by any chance?
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.
// 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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024