FROM CACHE - en_header

Debut theme 2021 swatches to the products page

Shopify Partner
6 0 1


We have tried the below code for the color swatches to the products page for the Debut theme version (17.9.2). Now it looks like not any other solutions are working for swatches. Did anyone have the latest code or workaround without an app?





Replies 6 (6)
Shopify Partner
6 0 1

Thank you @Danishecom for your replay.

I know how to make variant on the product page but I am looking for swatches  code example for debut theme.


Can you please give some more explanation or demo code .



242 6 23

the one you show me in the picture is not using debate them. in my customize them i have option different type let me show you wait. 

i am unable to do this in debute but i am using booster them it has an option of what you're looking let me show you.


Shopify Partner
6 0 1

Thank you for your time @Danishecom  but I am specifically looking for a Debut theme products page swatches code.

New Member
1 0 0

I'm with the same issue, seens all works fine. the swatch change de select hidden option, but this doesnt change sku properties

New Member
1 0 1

Worked out a solution for this.

First, ignore the step that mentions selectCallback, they removed that function from Debut years ago.

Second, within the swatch snippet you created around line 44 look for 

<div class="swatch clearfix" data-option-index="{{ option_index }}">

change that line to:

<div class="swatch clearfix single-option-selector-{{ }}" data-option-index="{{ option_index }}">


Finally, around line 28 look for:

<script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>

and replace it with 

<script>$(window).on('load', function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>


Everything else in the tutorial should still be the same.

Shopify Partner
168 9 23

@Max92  Hi there, yes there is lot of custom code needs to be added on certain files.