CSP App setup for Narrative Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open 'Theme.liquid' from layout and add the following code to the bottom of the file just above the tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

In narrative theme, some CSS is required for showing the swatches correctly. Please add this code to assets in “theme.scss.liquid” at the bottom of the file:

/*Start CSS for CSP App */
.product-form .collection-swatch-wrap
{
margin-left:100px!important;
}
/*End CSS for CSP App */

CSP App Setup for Collection Page

Open snippet “product-card” and add this attribute to the div in first line as shown in the screenshot.

product-selector="{{ product.id}}"

DONE!

CSP App setup for Simple Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open 'Theme.liquid' from layout and add the following code to the bottom of the file just above the tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-card-grid” and add this code in parent ( ) as its attribute

product-selector="{{ product.id}}"

DONE!

CSP App setup for Debut Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open ‘Theme.liquid’ from layout and add the following code to the bottom of the file just above the <body/>tag. 

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-card-grid” and add this code in parent (

) as its attribute
product-selector="{{product.id}}"

Refresh your collection page

DONE!

CSP App setup for Brooklyn Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open 'Theme.liquid' from layout and add the following code to the bottom of the file just above the tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-grid-item” and add this attribute code to the div in first line as shown in the screenshot.

product-selector="{{ product.id}}"

DONE!

CSP App setup for Minimal Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open ‘Theme.liquid’ from layout and add the following code to the bottom of the file just above the </body>tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-grid-item” and add this attribute code to the div in first line as shown in the screenshot.

product-selector="{{ product.id}}”

DONE!

CSP App setup for Capital Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open 'Theme.liquid' from layout and add the following code to the bottom of the file just above the tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-item” and add this attribute code to the div in first line as shown in the screenshot.

product-selector="{{ product.id}}"

DONE!

CSP App setup for Supply Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open ‘Theme.liquid’ from layout and add the following code to the bottom of the file just above the tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-grid-item” and add this code to the above () in parent div as shown in the screenshot.

product-selector="{{ product.id}}"

DONE!

CSP App setup for Venue Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open ‘Theme.liquid’ from layout and add the following code to the bottom of the file just above the </body>tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-grid-item” and add this code above the anchor() tag as a parent div

product-selector="{{ product.id}}”
 

and then close div after the anchor closed () tag Like this:

DONE!

CSP App setup for Venture Theme

Taking theme backup

This step is optional but highly recommended. Duplicate the theme on which you want to setup the CSP app and keep it as a backup because in case some issue happens, you can go back and publish the theme backup quickly.

CSP App Setup for Product Page

Go to Themes from dashboard >> Actions >> Edit Code

Open 'Theme.liquid' from layout and add the following code to the bottom of the file just above the tag.

{% if template contains 'product' %}
<div id= "hiddenProductId" style="display:none;"data-product-id="{{product.id}}"></div>
{% endif %}

CSP App Setup for Collection Page

Open snippet “product-card” and add this code above the anchor() tag as a parent div:

product-selector="{{ product.id}}”

and then close div after the anchor closed () tag Like this:

Done!

Collection Swatch Pug: speed up the loading of swatch icons on collection page

You can show color swatch buttons on your collections page using collection swatch pug app. The app javascript loads only after the web page has finished loading, so the load speed of the swatch buttons is little slow.

To overcome this issue and speed up the loading of CSP App code, 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:

Collection-Swatch-pug

Please note that in some themes the quickload may lead to quirky behaviour with the CSP. In most themes it works though.

If you have any query Please contact us on Techiepug Support