All platforms

1. 1.Add the banner

   With the Trackable CMP app: Online Store → Themes → Customise → App embeds, switch on Trackable CMP, paste your site key (YOUR_SITE_KEY) and Save. Without the app, or if your theme has tracking scripts written into theme.liquid: Online Store → Themes → ⋯ → Edit code → layout/theme.liquid, paste this on the line straight after <head> and Save, so those scripts wait for the choice too. Until Trackable CMP is in the Shopify App Store, use theme.liquid. Both at once is fine: the banner runs once.

   <script src="https://cmp.trackable.digital/l/YOUR_SITE_KEY.js"></script>

   Copy

2. 2.Switch off Shopify's own banner, keep its regions

   Settings → Customer privacy → Cookie banner: choose "Remove cookie banner", but keep the banner regions and set them to where this banner asks first (the UK and EU at least). If Shopify's regions do not match, Shopify can process data before the visitor chooses. Remove any other cookie banner app (Consentmo, Pandectes, Cookiebot, CookieYes…).

3. 3.Google Tag Manager on the storefront

   If GTM is written into theme.liquid, keep it and paste the banner at the top of theme.liquid (step 1), above GTM: the app embed loads at the end of <head>, after it. If an app adds GTM, choose Use Google Tag Manager on the site's Install page in the dashboard instead: our tag then sets the consent defaults inside GTM before any other tag. Shopify's Google & YouTube app, Stape and Elevar already follow the choice the banner gives Shopify.

4. 4.Optional: the cookie choice on the thank-you page

   Checkout loads no theme code, so a buyer who reached it without choosing (Shop Pay from a product page, a checkout link) is asked on the thank-you page. With the app: Settings → Checkout → Customise → Thank you page → Add block → "Trackable CMP: cookie choice". Every plan except Starter. Never paste the banner into checkout settings.

5. 5.Only if you run Google Tag Manager in a Shopify custom pixel

   Shopify's Google & YouTube app, Stape, Elevar and similar apps already follow the choice the banner gives Shopify: nothing to do for them. But GTM pasted into a custom pixel (Settings → Customer events) runs in Shopify's sandbox and cannot see the banner. Paste these lines at the top of that pixel, above your GTM code: they set Google Consent Mode from the buyer's choice and update it when they change their mind. Permission: "Required" with Analytics ticked keeps GTM off until the buyer agrees (strictest); "Not required" lets Google receive cookieless pings for its modelling while consent is denied.

   // Trackable CMP: Google Consent Mode for GTM in this pixel. Keep these lines first.
   window.dataLayer = window.dataLayer || [];
   function gtag() { window.dataLayer.push(arguments); }
   function trackableConsent(c) {
     var ads = c.marketingAllowed ? 'granted' : 'denied';
     var prefs = c.preferencesProcessingAllowed ? 'granted' : 'denied';
     return {
       analytics_storage: c.analyticsProcessingAllowed ? 'granted' : 'denied',
       ad_storage: ads, ad_user_data: ads, ad_personalization: ads,
       functionality_storage: prefs, personalization_storage: prefs, security_storage: 'granted'
     };
   }
   gtag('consent', 'default', trackableConsent(init.customerPrivacy || {}));
   api.customerPrivacy.subscribe('visitorConsentCollected', function (event) {
     gtag('consent', 'update', trackableConsent(event.customerPrivacy || {}));
   });
   
   // Your Google Tag Manager code below (without the <script> tags), then your event subscriptions.
   

   Copy

6. 6.Optional: signed-in customers, with consent

   Optional. Sends the signed-in customer's ID to Google Analytics (User-ID) once they allow analytics, and their email, hashed, for Google Ads enhanced conversions once they allow marketing. Before that it stays in the page only: nothing is stored or sent. In GTM, use the user_id variable in your GA4 tag and user_data.sha256_email_address for enhanced conversions. Paste it in layout/theme.liquid straight after the banner line.

   {% if customer %}
   <script>(window.TrackableConsent = window.TrackableConsent || []).push(['identify', '{{ customer.id }}', { emailSha256: '{{ customer.email | strip | downcase | sha256 }}' }]);</script>
   {% endif %}

   Copy

7. 7.Check it

   Open the store in a private window: the banner shows. Accept, add something to the cart and go to checkout: Shopify's pixels follow the choice. Then press Check the site now on the site's Install page in the dashboard, and Scan now on the Cookies page to list its cookies.

Next: Google Tag Manager