CSP APP SETUP GUIDE – Techiepugs

Setup Guide for CSP app

December 14, 2017
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.

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>