How To Install Cookie Information In Shopify

Follow these steps to install Cookie Information in Shopify

Please see these other Knowledge Base articles for further assistance with Shopify Consent or if you are using something other than Cookie Information:

How to check if your Consent Management Platform (CMP) is connected with Shopify Consent API

Part 1: Look for existing Snippet

Part 2: Create Snippet

Part 3: Verify existing code

Part 1: Look for existing Snippet

1. Log in to Shopify Admin and click "Sales channels"
   

2. Click "Online Store"

   
3. Click the button with the 3 dots beside "Customize"
   
4. Click "Edit code"
   

5. Click the "Filter files..." field and search for "cookie-information-consent"

   

6. If the template exists, continue with Part 3: Verify existing code.
   If it doesn't exist, continue with the next step.

Part 2: Create Snippet

1. Click "snippets"
   

2. Click "Add a new snippet"

   
3. Click on "File Name" and enter "cookie-information-consent", then click "Done"
   

4. Click in the blank space of the new snippet and paste this code:

   
   

   <script>
    const addCookieInformationConsentScript = () => {
        const consentScript = document.createElement('script');
        consentScript.setAttribute('src', 'https://policy.app.cookieinformation.com/uc.js');
        consentScript.setAttribute('data-culture', 'EN'); // replace with your site language
        consentScript.setAttribute('data-gcm-enabled', 'false');
        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>

5. Update the Language attribute:
   
   

   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

6. If you use multiple regions/languages add the code below above the <script> tag, modified for the specific language codes used by your site:
   

7. Click Save
   
8. Click theme.liquid
   
9. Find the </head> or </header> tag and paste this line above it:

   

   IMPORTANT: Script must be inserted AFTER

10. Click Save
    

Part 3: Verify existing code

1. If the snippet already exists, check the language code and make sure the rest of the code block looks correct
2. Open theme.liquid and make sure the cookie-information-consent is rendered just above the </head>