Hide Variant with one option Debut theme

Solved
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
Shopify Partner
1140 92 138

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.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
Tourist
5 0 0

Hi,

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

0 Likes
Shopify Partner
1140 92 138

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.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes

Success.

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.

 

2 Likes
Tourist
5 0 0

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

0 Likes
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