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
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
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?
Hi Perennial,
Please could you help me solve this problem on my store also?
Regards
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?
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?
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?
@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.
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!
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.
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:
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?
I have just started using the free theme CRAFT and have many variants in t-shirts. How can i show just the selected variant’s images and hide others? I do appreciate if you can help me. Thanks in advance