Debut Theme - Remove Color Option Drop Down

Solved
Tourist
12 0 0

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!

0 Likes
Tourist
25 0 3

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

0 Likes
Tourist
12 0 0
On each individual item? There has to be a way to have the theme remove the
option by default.
0 Likes

Success.

Shopify Partner
1125 90 137

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.

 

 

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
1 Like
Tourist
12 0 0

This worked perfectly! Thank you!


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

 

 



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

 

 


 

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

0 Likes
Shopify Partner
1125 90 137

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

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
New Member
6 0 0

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

0 Likes
Shopify Partner
1125 90 137

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

Email: infoperennialsolution@gmail.com

Skype: infoperennialsolution

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