Solved

Debut Theme - Remove Color Option Drop Down

taviandmina
Excursionist
20 0 5

Hi! I mistakenly assumed that when an item only had one color variant, the color drop down wouldn't display on the item's page, but I was wrong:

 

https://taviandmina.com/collections/dresses/products/butterfly-polka-dot-dress

 

I've been searching forum posts on how to add code to remove the drop down when there's nothing really to select (it's grey, it's the only option, no need to pick grey), but I can't find anything specific to this theme. Any one have any advice on how to only have the color select drop down when there is more than one variant?

 

https://taviandmina.com/collections/autumn/products/ruffle-sleeve-and-cuff-romper-in-multiple-colorw...

 

Thanks!

Accepted Solution (1)
Qualitycheck
Shopify Expert
1449 114 233

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 13 (13)

canadianj9
Excursionist
27 0 5

I think you just delete the color variant, and keep the size variant.

taviandmina
Excursionist
20 0 5
On each individual item? There has to be a way to have the theme remove the
option by default.
Qualitycheck
Shopify Expert
1449 114 233

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.

 

 

taviandmina
Excursionist
20 0 5

This worked perfectly! Thank you!


@Qualitycheck wrote:

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.

 

 



@Qualitycheck wrote:

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.

 

 


 

phoneideal
Visitor
1 0 0

Hi! Please, I'd like to remove my dropdown too, but I did not make it.

I tried the code above, but it didn't work on my shop.

 

Here are two screen shots, with the product page and with the code. 

 

This is my shop preview: https://i3ropgrxq88n3m30-8307966042.shopifypreview.com/

 

Could someone help me, please?

 

Thanks!

 

d675d760-ac82-478b-a0f5-b3dd16e60782.jpeg

e4716fef-49fe-4e6d-83de-ae963e662b8b.jpeg

Qualitycheck
Shopify Expert
1449 114 233

Hi @phoneideal,

 

It seems you are using Boundless theme. Every theme has a different code to fix.

Let's get connected over email or Skype to discuss it further.

Email: infoperennialsolution@gmail.com

Skype: infoperennialsolution

TBD19
Tourist
6 0 2

Hi, I have a similar query, How can i remove the drop down style from size and display the sizes in box type and if customer changes the color variants, it should display the available sizes of that product.  Can anyone help me on this.  Mine is Debut theme

Qualitycheck
Shopify Expert
1449 114 233

Let's get connected over email or Skype to discuss it further.

Email: infoperennialsolution@gmail.com

Skype: infoperennialsolution

kristinsinko
Visitor
1 0 0

I tried pasting this code into my product-liquid template, but it didn't remove the drop down menus and now I'm getting errors that something in the code is wrong even though I've replaced it with what was there originally.

 

Could you let me know how to get rid this drop down on my product pages?

 

My store is kristinsinko.com

 

Let me know if you need any other info. Thanks.

Qualitycheck
Shopify Expert
1449 114 233

Hi,
Hope you are doing well! I came across your post and ready to help you with the same.

it would be great if you can reach out over Skype or Email for further discussion and taking it ahead accordingly.
Email : infoperennialsolution@gmail.com
Skype : infoperennialsolution
Looking forward to your reply!
Thanks!

ReFILL4al1
Visitor
1 0 0

This didnt work for mine - I didn't have that code in my liquid file.

I dont sell clothes - food. I don't need the variants option at all and really want to remove it on all items, can anyone help?

ms_marci
New Member
10 0 0

hi do you have a way for dawn theme , thank you trying to remove samething ,I just want to keep size drop down menu

Proce
Visitor
1 0 0
If you have just one product variant, you delete variants and the option menus will disappear.
Shopify admin>all products>select product>scroll down to Variants>tick the box left of the variants>more actions> delete variants.