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.

CSP App Setup for Collection Page

The code which is to be placed in collection.liquid to show the swatches on collection page is: product-selector="{{ product.id }}"
In case collection.liquid have code {% section 'collection-template' %}
Open the collection-template section and search {% for product in collection.products %}
If that have include any snippet for example : {% include 'product-card' %}
Open snippet “Product-card” and add “product selector” code one Important thing is <a> anchor tag tag is not Pickup that code so you must add parent div and add “Product-selector” code

and then close div after the anchor tag Like this:

Then refresh your collection page