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.
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. 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.
Open the page and remove all the content. Under theme template, choose "cookie-policy" that we created earlier:
Save your changes.
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. Paste the following code into the file and save it:
<div id="cicc-template"></div>
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.
Related articles: