Skip to main content
 

Shopify installation

  • Updated
Note: We also offer a dedicated Shopify app as an alternative to this manual installation, which we primarily recommend due to its simplicity. The app runs via Shopify’s App Embed framework, which automatically handles script blocking and does not require the manual code markup described below.
Website Builders like Shopify add their own native scripts to the page before any of your own content is added, including third party scripts like Cookiebot. This means that by the time the Cookiebot script loads, cookies or similar trackers will potentially already have been set.
To avoid tracking by the Website Builder's native scripts prior consent, you would have to mark them up. Unfortunately these scripts aren't accessible to you, making this impossible.

Shopify does provide a Customer Privacy API though, which allows you to signal to Shopify whether or not consent has been given.
Be aware though that this does not block cookies prior consent! It merely makes these session based, instead of the normal persistent tracking.

You can read Shopify's own documentation for further details here: https://help.shopify.com/en/manual/privacy-and-security/privacy/gdpr/comply-with-gdpr

Implementing Cookiebot in Shopify

To add the Cookiebot script and enable Shopify's Customer Privacy API you need to access the code editor.
Here is how to do this:

  1.  
    1. In the left-hand menu, go to Themes
    2. Click the Customize button
    3. Click the ••• button

    4. Select Edit code

       

Enabling the Customer Privacy API

To enable Shopify's Customer Privacy API you need to create a new snippet:

  1. Under the Snippets section, click the "Add a new snippet" link.
  2. Name the new snippet "cookie-consent" and confirm by clicking the Create snippet button.

  3. Open the new cookie-consent.liquid file and add the following content:

    <script>
function feedback() {
  const p = window.Shopify.customerPrivacy;
  console.log(`Tracking ${p.userCanBeTracked() ? "en" : "dis"}abled`);
}
window.Shopify.loadFeatures(
  [
    {
      name: "consent-tracking-api",
      version: "0.1",
    },
  ],
  function (error) {
    if (error) throw error;
    if ("Cookiebot" in window)
      window.Shopify.customerPrivacy.setTrackingConsent({
        "analytics": false,
        "marketing": false,
        "preferences": false,
        "sale_of_data": false,
      }, () => console.log("Awaiting consent")
    );
  }
);

window.addEventListener("CookiebotOnConsentReady", function () {
  const C = Cookiebot.consent,
      existConsentShopify = setInterval(function () {
        if (window.Shopify.customerPrivacy) {
          clearInterval(existConsentShopify);
          window.Shopify.customerPrivacy.setTrackingConsent({
            "analytics": C["statistics"],
            "marketing": C["marketing"],
            "preferences": C["preferences"],
            "sale_of_data": C["marketing"],
          }, () => console.log("Consent captured"))
        }
      }, 100);
});
</script>


    Save the snippet by clicking the Save button.

    If you intend to add Cookiebot via Google Tag Manager you may skip steps 4 and 5.
  4. Open the theme.liquid file

  5. Insert the Cookiebot script directly under the <head> tag:

    <script
  id="Cookiebot"
  src="https://consent.cookiebot.com/uc.js"
  data-cbid="00000000-0000-0000-0000-000000000000"
  type="text/javascript"
  defer
></script>

    This ensures that the banner loads as fast as possible.
    Replace 00000000-0000-0000-0000-000000000000 with the serial number (CBID) from the Domain Group to which the domain is added. You can find it on the Your scripts tab in the Manager.

    If you intend to use Google Tag Manager, we recommend adding the Consent Mode script right above the Cookiebot script.


     

  6. Find this line: {{ content_for_header }}
    Add this code directly under it: {% render 'cookie-consent' %}
  7. Click the Save button to save your changes.

Enabling "prior consent" on third party scripts

To enable prior consent (block cookies until the user has consented), apply the data-cookieconsent attribute to all script tags that set cookies. Set the comma-separated value of the attribute to one or more of the three types of cookies: "preferences", "statistics" and "marketing" in accordance with the types of cookies being set by each script.
Finally change the script tag type attribute from "text/javascript" to "text/plain".

For example; If you are using Google Analytics Universal, make the following change to the code in such a way that this:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

becomes this (highlighted):

<script type="text/plain" data-cookieconsent="statistics">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

Keep in mind that any apps you add to your store can potentially set cookies too. This can't be prevented without "breaking" these apps.
It is recommended to implement 3rd party script to the greatest extent possible using a Tag Manager, which can then be configured to require consent before firing these tags.

Implementing the Cookie Declaration in Shopify

To show the Cookie Declaration on your website (in a new page or e.g. as part of your existing privacy policy), do the following:

  1. Under the Sales channels section, click Pages on the left-hand side menu of the admin panel.
  2. Click the Add page button in the upper right corner.
  3. Once you've created the page, put something you'll be easily able to find in raw HTML code (for example "#THIS IS THE PLACE#") in the exact position where you want display the Cookie Declaration.

  4. Click on the <> (Show HTML) button to access the source code of the page:

  5. Replace the placeholder from step 4 with the CookieDeclaration script:

    <script
  id="CookieDeclaration"
  src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js"
  type="text/javascript"
  async
></script>

    Replace the zeroes with the serial number (CBID) from the Domain Group to which the domain is added. 

  6. Click the Save button to save your changes.

Comments

3 comments

Date Votes
  • Boubacar
    • Edited

    Great tutorial!
    But how to enable "prior consent" on Google analytics when it is implemented with the Shopify app "Google and Youtube"?

    -1
  • Andrew Bennett

    This approach is spot on for implementing prior consent correctly under GDPR. I’ve used the data-cookieconsent attribute with several third-party scripts, and switching the script type to text/plain effectively prevents execution until the user gives explicit consent. It’s especially important to categorize each script properly — I’ve seen cases where mislabeling (like tagging analytics as "preferences") led to compliance issues during audits. For Google Analytics or marketing tags, wrapping them this way ensures that consent is truly respected before any data is collected. Great example — very clear!

    0
  • Asif Ali

    This guide is really straightforward—thanks for breaking it down step by step. I’ve struggled with cookie consent setup on Shopify before, and the explanation about handling scripts with type="text/plain" was especially useful. It’s good to see more resources that make compliance easier for store owners.

    0

Please sign in to leave a comment.