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:

<div id= "hiddenProductId" style="display:none;" data-product-id="{{product.id}}"></div>

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.

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

/* START CSS Code For CSP App */
.collection-swatch-wrap .color-true.collection-color-swatch {
margin-left: 70px;
margin-top: 12px;
}
/* if color swatches are showing in first position on product page then add css to given below */

.selector-wrapper:nth-child(1)::after {
content: none !important;
}
/* if color swatches are showing in second position on product page then add css to given below */

.selector-wrapper:nth-child(2)::after {
content: none !important;
}
/* END CSS Code For CSP App */

CSP App Setup for Collection Page

Open snippet “product-grid-item” and add this code above the anchor(<a>) tag as a parent div
<div product-selector="{{ product.id }}">

and then close div after the anchor closed (</a>) tag Like this:

</div>

Done!