Setup Guide for CSP app
Setup Guide for CSP app
by
Collection Swatch Pug app setup guide to help you get started with CSP in no time!
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
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:
Missing any theme
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 templates:
{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}
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_v2.js"></script>
You can add this line at the very end of your theme.liquid file, above the </body> tag:
