Hide Variant with one option Debut theme

Solved
Highlighted
Tourist
5 0 0

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 

0 Likes
Highlighted
Shopify Expert
1381 112 211

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.

0 Likes
Highlighted
Tourist
5 0 0

Hi,

The stores address is shoemed.myshopify.com, currently products with 1 colour are on the sale page :)

0 Likes
Highlighted
Shopify Expert
1381 112 211

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.

0 Likes
Highlighted

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.

 

3 Likes
Highlighted
Tourist
5 0 0

Thank you so much, that's exactly what I was after

0 Likes
Highlighted
New Member
1 0 0

hey, im having trouble on doing this for my brooklyn theme, i cant find the line of code, could you please help?

0 Likes
Highlighted
New Member
2 0 0

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? 

 

 

0 Likes
Highlighted
Tourist
20 0 1

Hi 

 

 

0 Likes
Highlighted
Tourist
4 0 2

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?Annotation 2020-04-15 103010.jpg

1 Like