Solved

Hide Variant with one option Debut theme

callumdowle
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 

Accepted Solution (1)

ankur-verma
Shopify Expert
94 19 27

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.

 

View solution in original post

Replies 18 (18)

Qualitycheck
Shopify Expert
1449 114 233

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
Tourist
5 0 0

Hi,

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

Qualitycheck
Shopify Expert
1449 114 233

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.

Javison4
Tourist
20 0 1

Hi 

 

 

simonsprock
Visitor
1 0 1

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?

Arundas
Shopify Partner
72 3 96

@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.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!

ankur-verma
Shopify Expert
94 19 27

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.

 

callumdowle
Tourist
5 0 0

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

blaze64209
Visitor
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?

NischalPiya
Visitor
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? 

 

 

mrdetente
Tourist
5 0 9

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

avadipietro
Excursionist
25 0 6

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!

cprice515
Visitor
1 0 1

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? 

Taylortth
Tourist
8 0 2

Hello, 

 

I have added this code to my file and it has not changed anything. Could I be doing something wrong? 

 

Taylortth_1-1595260105481.png

 

np212585
New Member
9 0 0

what if I have multiple variants and options how can I hide the ones that don't relate? Please help: 

 

np212585_0-1610840449049.png

 

PublicApps
Shopify Partner
146 5 34

@np212585 Check out this tutorial for linking product options.

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

outworkshop
Visitor
1 0 0

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:

              <div class="selector-wrapper js product-form__item" {% if option.values.size == 1%} style="display: none;"{% endif %}>
                <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>

 

JoshP23
Tourist
4 0 1

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?