Debut theme 2021 swatches to the products page

Max92
Tourist
5 0 1

Hello,

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?

URL: https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/m-p/616427

 

Thanks!

 

Max92
Tourist
5 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.

Screenshot: https://prnt.sc/z7qn75

Can you please give some more explanation or demo code .

 

Thanks!

0 Likes
Danishecom
Trailblazer
177 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.

theme.JPG

0 Likes
Max92
Tourist
5 0 1

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

0 Likes
Vhita
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

0 Likes
ShawG
New Member
1 0 0

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-{{ section.id }}" 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.

0 Likes
hash777
Shopify Partner
164 9 23

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

 

Ecommerce.PNG

0 Likes