CSP App setup for Pacific Theme

by with No Comment Uncategorized

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-list-item” and add this attribute code to the div as shown in the screenshot. 

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

 

and then close div tag Like this:

DONE!

CSP App setup for Broadcast Theme

by with No Comment Uncategorized

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 Impulse Theme

by with No Comment Uncategorized

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 in parent ( ) as its attribute 

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

 

DONE!

CSP App setup for Empire Theme

by with No Comment Uncategorized

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

 

In templates scroll down and open “product.liquid”, put this code to the bottom of your product.liquid template:

In case you have multiple product page templates in your store, you can put the code in all the templates for which you want to enable the product page swatches.

 

CSP App Setup for Collection Page

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

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

 

Refresh your collection page

 

Done!

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

In templates scroll down and open “product.liquid”, put this code to the bottom of your product.liquid template:

In case you have multiple product page templates in your store, you can put the code in all the templates for which you want to enable the product page swatches.

CSP App Setup for Collection Page

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

) as its attribute

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

Refresh your collection page

DONE!

CSP App setup for Envy Theme

by with No Comment Uncategorized

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 section “template-collection” and add this code in parent ( ) as its attribute 

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

DONE!

CSP App setup for District Theme

by with No Comment Uncategorized

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

 

In templates scroll down and open “product.liquid”, put this code to the bottom of your product.liquid template:

In case you have multiple product page templates in your store, you can put the code in all the templates for which you want to enable the product page swatches.

 

CSP App Setup for Collection Page

Open snippet “product-grid-item.liquid” and add this attribute to the first div in this file as shown in the screenshot.
product-selector="{{ product.id }}"

Done!

CSP App setup for Dawn Theme

by with No Comment Uncategorized

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-liquid” and add this code in parent ( ) as its attribute

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

Done!

CSP App setup for Icon Theme

by with No Comment Uncategorized

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 snippets “product-listing.liquid” and add this code in parent ( ) as its attribute as shown in the screenshot.

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

DONE!

CSP App setup for Symmetry Theme

by with No Comment Uncategorized

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-block.liquid” and add this attribute to the first div in this file as shown in the screenshot. 

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

DONE!

CSP App setup for Boundless Theme

by with No Comment Uncategorized

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 to the div in first line as shown in the screenshot. 

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

DONE!