Pop-up implementation

Cookie policy implementation

Linking the CCPA link to your cookie policy

Privacy controls implementation

A note on Google Analytics

Pop-up implementation

Before adding the script itself, you'll need to head into your Online Store Preferences and ensure that Limit tracking for customers in Europe is enabled. If your customers are US based, you can also activate Limit the third-party sale of your California customers' data.

Using the menu on the left-hand side: click on the Online Store item, and choose Online Store - Preferences - Scroll down to the Customer Privacy section. Click Activate for "Limit data collection for EU buyers.

Click Activate for "Limit data collection for California buyers" and you will be asked to install an app (this adds a link to the footer of your website regarding CCPA):

Click "Install app" and you will be taken to a new tab. Please click "Start setup" where it says "Add CCPA information page for California users":

Click "Add" on the opt-out page segment.

Scroll down to the bottom of the page and click Save.

To have the consent pop-up display when a visitor comes to your store, you will need to do two things:

  • Create a new file to add the code to

  • Call the file so that it is included in the <head> of your site

Using the menu on the left-hand side again, click on Online Store - Themes - Current theme section - Click Customize

At the bottom of the side panel, click Theme Actions and select Edit Code. A new tab will open where you can make changes to the code of your current theme.

Scroll down the left-hand file explorer until you see a heading called Snippets.

Click Add a new snippet and enter cookie-information-consent as the name of the file. Find the file you just created and click on it (it will be blank).

Paste the following code snippet into the file, remembering to change the data-culture attribute to the correct language code for your site:

{% comment %} Adding CookieInformation script {% endcomment %}

<script>
var cookie_script = document.createElement('script');
cookie_script.setAttribute('src','https://policy.app.cookieinformation.com/uc.js');
cookie_script.setAttribute('data-culture', 'EN');
cookie_script.id = 'CookieConsent';
document.head.appendChild(cookie_script);


{%comment %} CookieInformation Consent event {% endcomment %}
window.addEventListener('CookieInformationConsentGiven', function (event) { if (CookieInformation.getConsentGivenFor('cookie_cat_statistic') && CookieInformation.getConsentGivenFor('cookie_cat_marketing')) {
window.Shopify.customerPrivacy.setTrackingConsent(true, function(e){

console.log("Set Tracking Consent", true);
});
}else{
window.Shopify.customerPrivacy.setTrackingConsent(false, function(e){

console.log("Set Tracking Consent", false);
});
}
}, false);

</script>

Your cookie-information-consent.liquid snippet should now look like this:

Click Save.

In the file structure on the left-hand side, scroll up to the top and click on the file called theme.liquid under the Layout heading. Scroll down until you see the closing </head> tag, and insert the following line of code:

{% render 'cookie-information-consent' %}

Click Save.

Cookie policy implementation

Unlike some other CMS systems, it is not possible to directly paste code into pages on your site where you would like things to appear. To get around this, we will need to make a page template and add the code there.

To get to the code of your theme go to Online Store --> Themes --> Current theme section - Click Edit Code.

Under the Templates folder, click "add a new template". You should then see the modal appear where you can select what you would like to create a template for (and how it should be created):

Choose page from the dropdown menu, liquid for the type, and give it a name of cookie-policy:

Open the file page.cookie-policy.liquid file you have just created and add the following code:

{% render 'cookie-information-cookie-policy' %}

If there's already code in the file, please place it where you would like the policy to appear on the page.

Next, go to the Snippets folder and create a new snippet called cookie-information-cookie-policy (without quotes). Paste the following code into the file and save it:

{% comment %} Adding CookieInformation autogenerated cookie policy {% endcomment %}

<script id="CookiePolicy" src="https://policy.app.cookieinformation.com/cid.js" data-culture="EN" type="text/javascript"></script>

Find the page you want to add the cookie policy to (or if it doesn't exist, create a new page). Open it, and choose the template that was just created:

Save your changes, and now when you visit the cookie policy page, it will be autogenerated.

Linking the CCPA link to your cookie policy

Now that our privacy policy is in place, we can redirect the CCPA "Do not sell my data" footer link to it so that everything is in one place.

Click on the Pages menu item on the left hand side, under Online Store, and search for "Do not sell my pesonal data":

Open the page and remove all the content. Under theme template, choose "cookie-policy" that we created earlier:

Save your changes.

Finally, go back to your Online Store preferences --> Customer Privacy --> CCPA field --> "Activate":

Choose "Footer menu (recommended)" under the Navigation menu link segment, and then click "Activate"

Privacy controls implementation

To implement the privacy controls, we need to create one more snippet. Navigate to the Edit Code option of your theme (Online Store --> Themes --> Current theme section - Click Edit Code).

Under the Templates folder, open your page.cookie-policy.liquid file again. Insert and save the following line:

{% render 'cookie-information-privacy-controls' %}

Find your Snippets folder, and create a new snippet called cookie-information-privacy-controls

Insert and save the following code:

{% comment %} Adding CookieInformation auto-generated cookie policy {% endcomment %}

<script id="CookiePolicy" src="https://policy.app.cookieinformation.com/cid.js" data-culture="EN" type="text/javascript"></script>

A note on Google Analytics

If you have your Google Analytics property inserted into the Google Analytics field (under Online Store --> Preferences), then it will not be held back before consent has been given.

In order to ensure that it has, please remove your tracking code and implement it via Google Tag Manager or the analytics.js script.

Did this answer your question?