Collection Swatch Pug app setup guide to help you get started with CSP in no time!

NOTE: If you are facing any difficulty in getting started with the app, we offer free of cost app setup.

Contact us via email at contact@techiepugs.com or via shopify by clicking this button Contact Support

Getting Started with CSP and important points to keep in mind

The swatch color icons may not show immediately because of browser caching. If you have already setup the app correctly and swatches/changes are not being shown, try clearing browser cache and the swatch colors will update.

Check this documentation and select your theme for setup instructions:

In case your theme name is not present in the above documentation list, please contact us at Techiepugs.com after which our support ninja will setup the app for your store. They may need collaborators account access to your store so please send the correct shopify store url as well.

Product page app setup for all themes.
Put this code at the bottom end of your product.liquid template:
<div id="hiddenProductId" style="display:none;" data-product-id="{{product.id}}"</div>

Swatch button for a variant will show only if the variant image is set for it, so check if your product variants have been assigned their respective images. See screenshot for reference

The app javascript loads only after the web page has finished loading, so the load speed of the swatch buttons is little slow for incerasing the loading speed of buttons, please add this line of code to the theme.liquid template of your theme.:
<script type=”text/javascript” src=”{{shop.secure_url}}/tools/csp/csp.js?shop={{shop.permanent_domain}}”></script>
You can add this line at the very end of your theme.liquid file, above the </body> tag: