Hide Variant with one option Debut theme

callumdowle · ‎08-07-2019

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

ankur-verma · ‎08-08-2019

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.

View solution in original post

Hide Variant with one option Debut theme

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links