Debut Theme – Product Swatches

Highlighted
Tourist
8 0 3

Hi there,

Does anyone know how to use this Product Swatch tutorial with the Debut theme?
https://help.shopify.com/themes/customization/showcase-products/add-color-swatches

I can't find the selectCallback function anywhere.

Thanks

3 Likes
Highlighted
Shopify Expert
6 0 1

Having the same issue. Is the color swatch customization maybe not possible on this theme?

Lester de Freitas The Web Elite | Shopify Experts
0 Likes
Highlighted
Tourist
6 0 3

Hi,

Did you actually find where the selectCallback function is? I am also looking for it and not able to find it. Thanks

0 Likes
Highlighted
Shopify Expert
6 0 1

Hi Daniela,

No, it appears that with the update to Sectioned themes, Shopify has changed the way the selectCallback function works and it no longer goes by that name.

All the js now lives in a seperate file, usually called theme.js or something similar.

We have asked other theme developers about this and apparently, while swatches are still possible, the documentation from Shopify needs to be updated to reflect a new (apparently easier) method for setting these up in Sectioned themes.

So, basically we have been told to keep our eye on that customization and watch for an update.

So, if anyone on this thread notices an update there I think we would all appreciate a comment dropped here as a heads up.

Thanks everyone!

Lester de Freitas The Web Elite | Shopify Experts
1 Like
Highlighted
Tourist
6 0 3

Hey,

Thanks for the info. I checked the theme.js and managed to modify it so i see the color swatch! :) I dont think it's the nicest way to modify that js file but it will do till they publish the nice way :P So in theme.js at line 2482 you will find the variable variant declared and after i added the swatched code. Of course there are still some style changes that you should add by yourself as in the doc is css and now they are using scss, which i didnt do yet. But it seems to be working, adding it in the cart and everything.. Oh and you also have to add jquery to the theme so the other color select will dissappear. 

1 Like
Highlighted
Shopify Expert
6 0 1

Hi Daniela,

That is fantastic news, well done for playing around and finding a solution! We are so excited to hear that this could be the answer we have all been waiting for.

May I ask you to please clarify just this point: "Oh and you also have to add jquery to the theme so the other color select will dissappear. " What JQuery did you add and where?

And just to also confirm, are you using the Debut theme for this?

Lester de Freitas The Web Elite | Shopify Experts
0 Likes
Highlighted
Tourist
6 0 3

Yes, i use Debut :) JQuery, a js framework responsible for some magic :D In theme.liquid after this line '<!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]--> add this:


  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

0 Likes
Highlighted
Shopify Expert
2684 67 775

It actually is not the best idea -- most probably you will end up with extra copy of jQuery loaded.

For many Sectioned themes jQuery is included as a part of vendor.js.  Your inlined scripts do not see it because it is not available until the page is fully loaded, because vendor.js is included with defer="defer" attribute (probably a Shopify's attempt to reduce the number of render-blocking scripts). 

So you have two options: a) remove the defer attribute and allow vendor.js to load as soon as it is included (which I recommend to all non-programmer type shopify users, since it is easy) or b) modify the code and include it in the theme.js (what I do myself).

Or, you should remove jQuery from the vendor.js file if you include it separately.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
New Member
8 0 0

I can't make this to work. Both drop-down and radio options are displayed on my product page. What am I doing wrong?

I added this below second </select> in product-template.liquid

{% if product.available and product.variants.size > 1 %}
  {% for option in product.options %}
    {% include 'swatch' with option %}
  {% endfor %}
{% endif %}  

I don't think my theme.js is same as your Daniela. This is my code arround line 2482.

          // The variant doesn't exist, disable submit button and change the text.
          // This may be an error or notice that a specific variant is not available.
          $(this.selectors.addToCart).prop('disabled', true);
          $(this.selectors.addToCartText).text(theme.strings.soldOut);
        }
      } else {
        $(this.selectors.addToCart).prop('disabled', true);
        $(this.selectors.addToCartText).text(theme.strings.unavailable);
        $(this.selectors.productPrices)
          .addClass('visibility-hidden')
          .attr('aria-hidden', 'false');
      }
    },

I'm not sure where to add code related to callback?

0 Likes
Highlighted
New Member
4 0 0

Would love an answer to this as well. Since selectCallback is gone, what needs to be changed in the code and where in theme.js does it go?

0 Likes