Shopify themes, liquid, logos, and UX
Hi,
Im looking to hide a variant with one option, I have tried using the code below, however I cannot get it to work. Not sure if I'm entering it in the wrong place? (Im using the debut theme)
<div class="product-variants"{% if product.variants.size == 1 %} style="display: none;"{% endif %}>
Thanks,
Callum
Solved! Go to the solution
This is an accepted solution.
Hi
You can do it by editing the product-template.liquid file. And the code you write will count if there is one variant in product. But you want to hide the variant if it has only one option. To handle this you have to add this code where variant has been place in product-template.liquid file.
{% if option.values.size == 1%} style="display: none;"{% endif %}
In that file you will see code like this.
<div class="selector-wrapper js product-form__item"> <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}"> {{ option.name }} </label> <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>
Replace that code with below code.
<div class="selector-wrapper js product-form__item"> <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}" {% if option.values.size == 1%} style="display: none;"{% endif %}> {{ option.name }} </label> <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}" {% if option.values.size == 1%} style="display: none;"{% endif %}> {% for value in option.values %} <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option> {% endfor %} </select> </div>
Please let me know if it was helpful.
Hi,
This is the most common issue faced by merchants.
Could you please provide website URL so that I can show you the desired result from console?
Looking forward to your response.
Hi,
The stores address is shoemed.myshopify.com, currently products with 1 colour are on the sale page 🙂
Hi @callumdowle,
Thanks for providing store address.
Okay, as per my understanding, you want to hide the single variant option of color from the specific products wherever applicable. If this is the case then I would request you to provide access to your store as it requires complex code level change.
Looking forward to your response.
Hi Perennial,
Please could you help me solve this problem on my store also?
Regards
Hi Qualitycheck,
I want to hide options from the dropdown when the variant does not exist
https://sprocket-care.myshopify.com/products/x-hand-sanitiser-stand
Password: letmein
Available Options are only:
No Sign | N/A
DIY Sign Kit | Print your own sign
Standard Sign | Blue
Standard Sign | Grey
Custom Sign | Add my logo
Eg. So when I choose "No sign" for first option, I only want the second dropdown to show "N/A" and not the other options.
Can you assist with this?
@simonsprock It's much better for the user if you use only one dropdown that contains all of the five options. That way the user only has to choose from one dropdown, instead of two separate dropdowns - less friction to get to checkout. You can also fully control the option combinations that way without relying on hacks controlling the dropdown options.
This is an accepted solution.
Hi
You can do it by editing the product-template.liquid file. And the code you write will count if there is one variant in product. But you want to hide the variant if it has only one option. To handle this you have to add this code where variant has been place in product-template.liquid file.
{% if option.values.size == 1%} style="display: none;"{% endif %}
In that file you will see code like this.
<div class="selector-wrapper js product-form__item"> <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}"> {{ option.name }} </label> <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>
Replace that code with below code.
<div class="selector-wrapper js product-form__item"> <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}" {% if option.values.size == 1%} style="display: none;"{% endif %}> {{ option.name }} </label> <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}" {% if option.values.size == 1%} style="display: none;"{% endif %}> {% for value in option.values %} <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option> {% endfor %} </select> </div>
Please let me know if it was helpful.
Thank you so much, that's exactly what I was after
hey, im having trouble on doing this for my brooklyn theme, i cant find the line of code, could you please help?
Hey, I don't seem to have product-template.liquid file. I have tried to look at Shopify's documentation about resolving this issue. But I am exactly not sure where should I make change to make this work?
This was helpful - thank you. I noticed that the correct option still appears - but now hangs out awkwardly to the right of where the hidden element was. Any quick tips on how to fix that?
I know this is an old post -- are you still having that problem? Make sure you are using display:none and not visibility:hidden. Otherwise, you can provide me with the code and I can try and help you!
Once applied, there seems to be a black space where the variant used to appear. This causes other variants (that I want to keep) to be shifted over unnecessarily. Is there a way to alter to code to prevent a "place holder" where the unwanted variant was eliminated?
Hello,
I have added this code to my file and it has not changed anything. Could I be doing something wrong?
what if I have multiple variants and options how can I hide the ones that don't relate? Please help:
@np212585 Check out this tutorial for linking product options.
Public Apps | Theme customization & App development
- Was my reply useful? Like it to let me know!
- Did I answer your question? Please mark as Accepted Solution.
- Need more help? Contact us.
I would add something to your answer. Just add the "display:none" spot to the selector-wrapper element. That way you won't have the blank space problem 🙂
Try this code:
<div class="selector-wrapper js product-form__item" {% if option.values.size == 1%} style="display: none;"{% endif %}>
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}" {% if option.values.size == 1%} style="display: none;"{% endif %}>
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}" {% if option.values.size == 1%} style="display: none;"{% endif %}>
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
Hello, I am trying to apply this to our theme, but I am not finding this line of code in our product-template.liquid. Has this changed in the last few years since this solution was accepted?
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