Paste the TermsFeed Free Cookie Consent code into theme.liquid, tag the scripts in your theme, and grant consent in the Shopify Customer Privacy API. Cookie Consent then shows its consent banner on every storefront page and, by default in express mode, holds the optional tagged scripts until the visitor accepts.

Setup takes 5 steps and about 15 minutes. Get the admin access and the code ready before you open the theme.

  1. Sign in to the Shopify admin with permission to edit themes.
  2. Generate your code at termsfeed.com/cookie-consent with the generator defaults, which use express consent.
  3. Check that your plan lets you edit theme code. The Shopify Starter plan comes with the Spotlight theme only, and Shopify states that other themes and customization options are not available on it.

Paste the code into layout/theme.liquid, directly above the closing </body> tag, so every storefront page loads it. The file theme.liquid is the layout that the storefront pages of an Online Store 2.0 theme, such as Dawn or Horizon, share, apart from the password page and the checkout. Shopify recommends a duplicate of the theme before you edit its code.

Open the code editor of your current theme from the Shopify admin.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click the horizontal menu icon beside your current theme and select Duplicate to keep a backup.
  3. Click the horizontal menu icon of the current theme again and select Edit code.
  4. Open theme.liquid in the Layout folder.
  5. Paste the code directly above </body> and click Save.

The code the generator writes has this shape. Keep the options you chose in the generator. The generator leaves https: off the script address, and either form loads the same file.

<!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Example Store"});
});
</script>

<noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed Generator</a></noscript>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->

<a href="#" id="open_preferences_center">Update cookies preferences</a>

Keep the "Update cookies preferences" link the generator adds at the end, so visitors reopen the Preferences Center. A store with a password page uses layout/password.liquid for that page, so paste the code there too while the password page is on. Look up what each line of the code does in Install a Cookie Banner on Any Website.

Step 2: Tag the tracking scripts in the theme

Give every optional script in your theme code type="text/plain" and a data-cookie-consent category, and Cookie Consent releases it once the visitor accepts that category. An untagged script runs on page load, before the visitor sees the consent banner. Open theme.liquid and the files in the Snippets folder, and look for <script> tags that load a tracker, such as googletagmanager.com, connect.facebook.net, or clarity.ms. Click Save in each file you change.

Keep the async of an external script that has one, unless inline code after it uses the library.

<script type="text/plain" data-cookie-consent="tracking" async src="https://analytics.example.com/script.js"></script>

Use tracking for analytics, targeting for advertising pixels, and functionality for chat and other services the visitor uses. App embeds add scripts you do not see in the theme code, so check Online Store > Themes > Edit theme > App embeds for them. Copy the tagged Google Analytics 4 tag from Block Google Analytics 4 Until Consent, and choose the category of every other script with The 4 Cookie Categories.

Remove the Shopify consent banner from the storefront, so visitors answer one consent banner instead of 2. Shopify turns on its own consent banner for visitors in the UK and the European Economic Area (EEA) when your store has active markets there, through the automated privacy settings. A visitor from those regions sees the Shopify consent banner and the Cookie Consent banner on the same page until you remove one of them.

Remove the Shopify consent banner in Settings > Customer privacy. The Shopify help page on customer privacy settings lists the "Remove cookie banner" option for stores with a third-party consent banner, though not every store shows it.

  1. Click "Cookie banner".
  2. Click the horizontal menu icon and select "Remove cookie banner".
  3. Click Remove.

In Customer privacy, make Shopify tools wait for consent in every region, because Cookie Consent asks every visitor in every region. Select every region with the "Set custom banner regions" button, or with Edit in the Regions section where that button is missing, and click Save. In the selected regions, Shopify collects non-essential data only after consent. Outside them, the Customer Privacy API allows all purposes by default.

Grant consent in the Shopify Customer Privacy API from the scripts_specific_loaded callback, so Shopify pixels, Shopify cookies, and apps that read the API follow the answer. Cookie Consent does not send any signal to Shopify by itself. The API takes 4 keys, and each one follows one Cookie Consent category.

Shopify Customer Privacy API key Cookie Consent category
analytics tracking
marketing targeting
preferences functionality
sale_of_data targeting

Paste the first script of this code before the inline run() script in theme.liquid. That script defines a function that loads the Customer Privacy API with window.Shopify.loadFeatures and calls setTrackingConsent, as the Shopify developer documentation shows. Then copy the callbacks and callbacks_force keys of the second script into your own run() call, keep your generator options, and click Save.

<script type="text/javascript">
function setShopifyConsent(consent) {
  if (!window.Shopify || !window.Shopify.loadFeatures) {
    return;
  }
  window.Shopify.loadFeatures(
    [{ name: 'consent-tracking-api', version: '0.2' }],
    function (error) {
      if (error) {
        throw error;
      }
      window.Shopify.customerPrivacy.setTrackingConsent(consent, function () {});
    }
  );
}
</script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "headline",
  "consent_type": "express",
  "palette": "dark",
  "language": "en",
  "page_load_consent_levels": ["strictly-necessary"],
  "notice_banner_reject_button_hide": false,
  "preferences_center_close_button_hide": false,
  "page_refresh_confirmation_buttons": false,
  "website_name": "Example Store",
  "callbacks": {
    "scripts_specific_loaded": function (level) {
      switch (level) {
        case 'functionality':
          setShopifyConsent({ preferences: true });
          break;
        case 'tracking':
          setShopifyConsent({ analytics: true });
          break;
        case 'targeting':
          setShopifyConsent({ marketing: true, sale_of_data: true });
          break;
      }
    },
    "user_consent_saved": function (details, reason) {
      if (reason !== 'choice') {
        return;
      }
      var refused = {};
      if (!details.functionality) { refused.preferences = false; }
      if (!details.tracking) { refused.analytics = false; }
      if (!details.targeting) { refused.marketing = false; refused.sale_of_data = false; }
      if (Object.keys(refused).length) {
        setShopifyConsent(refused);
      }
    }
  },
  "callbacks_force": true
});
});
</script>

callbacks_force: true makes scripts_specific_loaded run for every accepted category, including categories with no tagged script in the page. The callback runs on the page where the visitor accepts and on every later page load, so Shopify gets the grant again on each page. Read when scripts_specific_loaded needs this option in Callbacks and DOM Events.

scripts_specific_loaded only grants consent. It runs once for each accepted category, and each call passes only the keys of that category. The Customer Privacy API reference allows a call with only some of the keys: setTrackingConsent sets "one or more consent signals at once". A visitor who has not answered keeps the Shopify default, which in the regions you select in Customer privacy means Shopify tools wait for consent. On each answer, user_consent_saved sends false for the keys of every category the visitor refused, so a withdrawal reaches Shopify too.

Keep the "Update cookies preferences" link from the generator block in your theme code, so visitors reopen the Preferences Center from every page and change their answer. The link works through its id, open_preferences_center, and once Cookie Consent runs, it stops the browser from following the link.

Above </body> in theme.liquid, the link shows at the bottom of every storefront page. Move it into the footer section of your theme in the Sections folder to show it inside the footer, and keep the id. Change the text of the link to a label visitors recognize, such as "Cookie settings", and click Save. Find other ways to open the Preferences Center in Add a Cookie Settings Link.

The checks assume express consent with page_load_consent_levels left out or at the generator value ["strictly-necessary"], and the "I decline" button shown. Turn off the password page first, or have the store password ready, so you test the storefront layout. Close every private window, then check the store in a new one with Chrome DevTools open. The new window does not hold an earlier answer or an admin session, so the consent banner appears as it does for a first-time visitor.

Run each check in order in that one private window. Publish your change and clear any page cache first.

  1. Open your store in the new private window, open DevTools, select the Network tab, type cookie-consent in the filter box, and reload. The loader cookie-consent.js, the script cookie-consent-code.js, and the ping appear, and the consent banner shows.
  2. Type the host of one tagged script in the filter box and reload. No request appears before you answer.
  3. Click the "I agree" button. Requests to that host appear without a page reload.
  4. Select the Console tab and run Shopify.customerPrivacy.currentVisitorConsent(). The values read yes for every key after a click on the "I agree" button.
  5. Select the Application tab, open Cookies for your store address, and check that cookie_consent_level and cookie_consent_user_accepted exist.
  6. Click your preferences link. The Preferences Center opens.

Then check the "I decline" button in another new private window.

  1. Close every private window, open a new one, and open DevTools with the Network tab filtered on the host of the tagged script.
  2. Load your store and click the "I decline" button.
  3. Run window.Shopify && Shopify.customerPrivacy && Shopify.customerPrivacy.currentVisitorConsent() in the Console tab. Every value reads no.
  4. Confirm that the Network tab does not show any request to the host of the tagged script. Run the full set of checks for any site in Check That Your Cookie Banner Works.

Cookie Consent holds only the tagged scripts in your theme code, so several parts of a Shopify store are not controlled by its consent banner. The grant your callback forwards reaches the Shopify tools that read the Customer Privacy API. Every other script runs as Shopify or the app decides.

Check each of these parts against the consent your store needs.

  • The checkout. Shopify applies a theme layout such as theme.liquid only to pages outside the checkout, according to the Shopify layouts reference. The consent banner and your tagged scripts never load in the checkout.
  • Pixels added in the admin. App pixels and custom pixels in Settings > Customer events run in a Shopify sandbox, and Shopify runs them by the consent recorded in the Customer Privacy API.
  • Apps and theme app embeds. Their scripts are not in your theme code, so no tag of yours reaches them. Check whether each app reads the Customer Privacy API, or turn its tracking off.
  • Shopify cookies. Shopify sets its own cookies for the cart and the session, and the Customer Privacy API decides which optional ones Shopify sets.
  • Server-side events. An app that sends conversions from its own server, such as the Meta Conversions API, bypasses every consent banner in the browser.

Rejecting does not delete a cookie a tracker set before the visitor withdrew consent. Read the other limits of Cookie Consent in Limits of Free Cookie Consent: What It Does Not Do.

Start with the Network tab and the theme list, which reveal a tracker that runs twice and code in a theme that is not published.

  1. The tracker runs twice. A Google Analytics 4 tag in the theme and the Google & YouTube app on the same store send every page view twice. After you accept, the Network tab filtered for google-analytics.com shows 2 collect requests with en=page_view for one page load. Remove one of the 2, and tag the theme copy if you keep it.
  2. The code went into a theme that is not published. The page source of the live store does not hold cookie-consent.js. Edit the theme marked current in Online Store > Themes, and paste the code again after you publish a different theme.
  3. The password page does not show the consent banner. Search layout/password.liquid in the code editor for cookie-consent.js, and paste the code there when nothing matches.
  4. The option callbacks_force is missing. Shopify does not get a grant for a category with no tagged script in the page. Run Shopify.customerPrivacy.currentVisitorConsent() in the Console tab after you accept, and a key with an empty value means this option is missing. Add "callbacks_force": true to the run() call that holds your callbacks.
  5. The Shopify consent banner still shows. A visitor from a region where Shopify shows its consent banner sees 2 consent banners on the same page. Remove the Shopify consent banner with "Remove cookie banner" in Settings > Customer privacy > "Cookie banner".

A consent app from the Shopify App Store shows its own consent banner on the same pages. Find how to tell the consent banners apart and turn one off in 2 Cookie Banners Appear on Your Site.