Debut Theme Variant Option Boxes Instead Of Dropdown

Highlighted
New Member
7 0 0

I would like to change the variant options to boxes instead of a drop down.  at least for sizes.  Debut Theme.

0 Likes
Highlighted
Shopify Partner
644 131 152

Hello Hitman2k5,

Here is beautiful explanation from Shopify to implement swatch https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

Hope it will help you.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Shopify Expert
1342 111 181

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>

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
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes