If you would like to implement Google Consent Mode v2, please follow this guide and then check out our CMv2 Shopify guide. This shows you how to update your implementation to use the new consent mode parameters within Shopify.
Pop-up implementation
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:
<script>
const addCookieInformationConsentScript = () => {
const consentScript = document.createElement('script');
consentScript.setAttribute('src','https://policy.app.cookieinformation.com/uc.js');
consentScript.setAttribute('data-culture', 'EN');
consentScript.id = 'CookieConsent';
document.head.appendChild(consentScript);
};
const setupListenerForConsentGathering = () => {
window.addEventListener("CookieInformationConsentGiven", () => {
let consent = {};
let consentSignals = {};
if (window.CookieInformation) {
consent = window.CookieInformation._getCookieValue('CookieInformationConsent');
consent = JSON.parse(consent);
if (consent) {
consentSignals = consent.consents_approved || [];
consentSignals = consentSignals.reduce((acc,curr)=> (acc[curr]=true,acc),{});
}
}
customerPrivacyAPIReady = setInterval(() => {
if (window.Shopify.customerPrivacy) {
clearInterval(customerPrivacyAPIReady);
window.Shopify.customerPrivacy.setTrackingConsent(
{
"analytics": consentSignals['cookie_cat_statistic'] || false,
"marketing": consentSignals['cookie_cat_marketing'] || false,
"preferences": consentSignals['cookie_cat_functional'] || false,
"sale_of_data": consentSignals['cookie_cat_marketing'] || false,
},
() => console.log("Cookie Information: consent gathered"),
);
}
}, 100);
});
};
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
error => {
if (error) {
throw error;
}
setupListenerForConsentGathering();
addCookieInformationConsentScript();
}
);
</script>
Save the pasted code in the file.
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 (Optional)
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 the 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>
If the language differs from English on the website, remember to also change the data-culture in the script above.
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 the 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 your Google Analytics property is inserted into the Google Analytics field (under Online Store --> Preferences), it will not be held back before consent has been given.
To ensure that it has, please remove your tracking code and implement it via Google Tag Manager or the analytics.js script.
Multiple languages
If you have multiple languages, you can easily accommodate this by adding the following code snippet:
{% assign dataCulture = 'DA' %}
{% if shop.locale == 'en' %}
{% assign dataCulture = 'EN' %}
{% elsif shop.locale == 'de' %}
{% assign dataCulture = 'DE' %}
{% elsif shop.locale == 'no' %}
{% assign dataCulture = 'NO' %}
{% elsif shop.locale == 'sv' %}
{% assign dataCulture = 'SV' %}
{% elsif shop.locale == 'fi' %}
{% assign dataCulture = 'JA' %}
{% endif %}
So the cookie-information-consent.liquid file should look like this:
{% assign dataCulture = 'DA' %}
{% if shop.locale == 'en' %}
{% assign dataCulture = 'EN' %}
{% elsif shop.locale == 'de' %}
{% assign dataCulture = 'DE' %}
{% elsif shop.locale == 'no' %}
{% assign dataCulture = 'NO' %}
{% elsif shop.locale == 'sv' %}
{% assign dataCulture = 'SV' %}
{% elsif shop.locale == 'fi' %}
{% assign dataCulture = 'FI' %}
{% endif %}
<script>
const addCookieInformationConsentScript = () => {
const consentScript = document.createElement('script');
consentScript.setAttribute('src','https://policy.app.cookieinformation.com/uc.js');
consentScript.setAttribute('data-culture', '{{ dataCulture }}');
consentScript.id = 'CookieConsent';
document.head.appendChild(consentScript);
};
const setupListenerForConsentGathering = () => {
window.addEventListener("CookieInformationConsentGiven", () => {
let consent = {};
let consentSignals = {};
if (window.CookieInformation) {
consent = window.CookieInformation._getCookieValue('CookieInformationConsent');
consent = JSON.parse(consent);
if (consent) {
consentSignals = consent.consents_approved || [];
consentSignals = consentSignals.reduce((acc,curr)=> (acc[curr]=true,acc),{});
}
}
customerPrivacyAPIReady = setInterval(() => {
if (window.Shopify.customerPrivacy) {
clearInterval(customerPrivacyAPIReady);
window.Shopify.customerPrivacy.setTrackingConsent(
{
"analytics": consentSignals['cookie_cat_statistic'] || false,
"marketing": consentSignals['cookie_cat_marketing'] || false,
"preferences": consentSignals['cookie_cat_functional'] || false,
"sale_of_data": consentSignals['cookie_cat_marketing'] || false,
},
() => console.log("Cookie Information: consent gathered"),
);
}
}, 100);
});
};
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
error => {
if (error) {
throw error;
}
setupListenerForConsentGathering();
addCookieInformationConsentScript();
}
);
</script>
Related articles: