Hide Variant with one option Debut theme

[callumdowle]

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 

[Qualitycheck]

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.

[callumdowle]

Hi,

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

[Qualitycheck]

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.

[ankur-verma · 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.

[callumdowle]

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

[blaze64209]

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

[NischalPiya]

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? 

[Javison4]

Hi Perennial,

Please could you help me solve this problem on my store also?

Regards

[mrdetente]

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?