Debut Theme Variant Option Boxes Instead Of Dropdown

Highlighted
Tourist
9 0 2

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
1158 233 300

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
1380 112 211

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>

0 Likes
Highlighted
Tourist
3 0 2

This is for Debut Theme

I found a great tut on YouTube. I learned how to create the color swatches code and css. I then modified it slightly for the sizes and it worked great.

Hope this helps you (and others).

Scott R

 

Step 1

Create your image swatches for sizes and colors. I created 28x28 jpg images.

 

3 for sizes (Small.jpg, Medium.jpg, Large.jpg)

6 for colors (Black.jpg, Grey.jpg, Red.jpg, Navy.jpg, BabyBlue.jpg, Green.jpg)

 

The image filenames ARE case sensitive and MUST be exactly the same as your variation sizes and colors. For example, if your size is Small (with a capital S), your image filename MUST be Small.jpg. It cannot be small.jpg (with lowercase s). Same for color, if your color is Black (with a capital B), your image filename MUST be Black.jpg NOT black.jpg (with lowercase b).

 

Upload these images to your Assets.

 

Step 2

Add this CSS code to the bottom of theme.scss.liquid in your Assets folder. It is for the styles you are about to create. After Step 4 you can come back and adjust these.

 

/* start product sizes swatch edits */

.variant-sizes
{
display:flex;

}

.variant-sizes input
{
display:none;
}

.variant-sizes label
{
max-height:40px;
margin-right:3%;
}

.variant-sizes label:last-child
{
margin-right:0%;
}

.variant-sizes img
{
height:36px;
width:37px;
}

.variant-sizes input:checked + label
{
border: 2px solid black;
}

/* end product sizes swatch edits */

/* start product color swatch edits */

.variant-swatches
{
display:flex;

}

.variant-swatches input
{
display:none;
}

.variant-swatches label
{
max-height:40px;
margin-right:3%;
}

.variant-swatches label:last-child
{
margin-right:0%;
}

.variant-swatches img
{
height:36px;
width:37px;
}

.variant-swatches input:checked + label
{
border: 2px solid black;
}

/* end product color swatch edits */

 

Step 3

Add this code in the product-template.liquid in your Sections folder. Paste this code over your {% unless to {% endunless for your product-form__controls-group. For me it started at line 150 and ended at line 168. It became lines 150 - 201.

 

 {% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">

{%if option.name == "Size"%}
<label>{{option.name}}</label>
{%assign index = forloop.index %}
<div class="variant-sizes">
{%for value in option.values%}
<input class="single-option-selector-{{ section.id }}" id="size-{{forloop.index}}" type="radio" name="size" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>
<label for="size-{{forloop.index}}">
<img src="{{value | escape | append:'.jpg' | strip | asset_url }}" alt="{{value}}"/>
</label>
{%endfor%}
</div>

{%else%}

{%if option.name == "Color"%}
<label>{{option.name}}</label>
{%assign index = forloop.index %}
<div class="variant-swatches">
{%for value in option.values%}
<input class="single-option-selector-{{ section.id }}" id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>
<label for="color-{{forloop.index}}">
<img src="{{value | escape | append:'.jpg' | strip | asset_url }}" alt="{{value}}"/>
</label>
{%endfor%}
</div>

{%else%}

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

{%endif%}
{%endif%}

</div>
{% endfor %}
</div>

{% endunless %}

 

Step 4

Change this code to get the Color options to drop down to the next line under the Sizes.

Alter this in theme.scss.liquid in your Assets folder.  For me it is lines 3632 - 3634.

 

Change flex-basis value from 50% to 100%.

 

Should look like this.

 

@include media-query($large-up) {
flex-basis: 100%;
padding: 0 5px;

Highlighted
New Member
6 0 0

In my Shopify debut theme variant name doesn't display in product page how to fix it   I also change the varient name in product add page but it doesn't display in product view page 

0 Likes
Highlighted
New Member
6 0 0

In my Shopify debut theme variant name doesn't display in product page how to fix it   I also change the varient name in product add page but it doesn't display in product view page

 

Capture.JPG

0 Likes
Highlighted
Excursionist
39 0 10

Hey @ccsp-global, thanks for providing this. However, after following all your steps, my image links are appearing broken. Any ides as to what I did wrong? For the record, I have uploaded the images to my assets. 

0 Likes
Highlighted
Tourist
3 0 2

First thing I would check is that the product names exactly match the product image names. As I mentioned in the post they are case sensitive so the product name and file name must match exactly. When they dont match, they dont display. Will you attach a screen cap showing the image files in the assets folder and one of your product names?

0 Likes
Highlighted
Tourist
3 0 2

Is it possibly because it is sold out? Maybe test adding stock to that variant and see if that resolves it?

0 Likes
Highlighted
Shopify Partner
43 0 2

Here's a link to the You Tube tutorial ... https://youtu.be/JmyQNJTt4gQ

0 Likes