Skip to main content
All CollectionsCMS guides
Set up Cookie Information consent popup in Shopify
Set up Cookie Information consent popup in Shopify

Learn how to set up Cookie Information consent popup in Shopify.

Updated this week

If you want to collect data on your Shopify store’s visitors you need to display a consent popup to ask to use their data. To achieve this, set up Cookie Information consent popup in Shopify.

In this article, we’ll show you how to do it.

Before you start

Here are a few things to know before you start:

  • To learn how to customize your cookie consent template, see this style guide.

Set up Cookie Information consent popup in Shopify

To set up the Cookie Information cookie consent popup in Shopify, follow these steps:

1. Log in to the Shopify account.

2. Navigate to Online Store > Themes > Current theme.

3. Click Customize.

4. Click the three-dot icon and click Edit code.

Edit theme's code in shopify

5. Scroll down to Snippets and click Add a new snippet.

add new snippet in Shopify

6. Name the file 'cookie-information-consent' and click Done.

create a new snippet file cookie-information-consent.liquid

7. In Snippets, click cookie-information-consent.liquid.

8. Paste the Shopify installation code into the file:

<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 consentSignals = {};
let consentCookieReady = false;
let customerPrivacyAPIReady = false;
const checkAndSetTrackingConsent = () => {
if (consentCookieReady && customerPrivacyAPIReady && Object.keys(consentSignals).length > 0) {
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")
);
}
};
if (window.CookieInformation) {
const consentCookie = window.CookieInformation._getCookieValue('CookieInformationConsent');
if (consentCookie) {
const consent = JSON.parse(consentCookie);
if (consent) {
consentSignals = consent.consents_approved || [];
consentSignals = consentSignals.reduce((acc, curr) => {
acc[curr] = true;
return acc;
}, {});
consentCookieReady = true;
checkAndSetTrackingConsent();
}
}
}
const customerPrivacyAPIInterval = setInterval(() => {
if (window.Shopify.customerPrivacy) {
clearInterval(customerPrivacyAPIInterval);
customerPrivacyAPIReady = true;
checkAndSetTrackingConsent();
}
}, 100);
});
};
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
error => {
if (error) {
throw error;
}
setupListenerForConsentGathering();
addCookieInformationConsentScript();
}
);
</script>

9. Click Save.

Add the snippet

Note: The attribute data-culture = "EN" controls the language in which the popup will appear on the page – in this example, it will be displayed in English. To change the language, set the data-culture attribute to a different language code. For more details, see this article.

11. Navigate to layout and click theme.liquid.

edit theme liquid

12. Add the following code snippet {% render 'cookie-information-consent' %} just before the closing </head> tag in the theme.liquid file, which is part of Shopify's theme.

insert the snippet into the code

13. Click Save.

Related links

Did this answer your question?