Set up Cookie Information consent popup in Shopify

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.

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

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

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.

11. Navigate to layout and click 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.

13. Click Save.

Related articles

• Set up Google consent mode v2 by updating main installation code
• Set up Google consent mode v2 using WordPress plugin
• Google documentation on consent mode