Skip to content

CookieTractor & Shopify

To use CookieTractor with your Shopify store, you need to edit your store theme.

  • Go to Themes and click on Customize.
  • Click on the "..." button and choose Edit code

Create snippet

In the Snippets-folder, create a new snippet called cookie-tractor, use the following code:

<style>
  #shopify-pc__banner {display:none !important;}
</style>
<script>  

window.Shopify.loadFeatures(
  [
    {
      name: "consent-tracking-api",
      version: "0.1",
    },
  ],
  function (error) {
    if (error) throw error;

    const currentConsent = window.Shopify.customerPrivacy.currentVisitorConsent();
    
    // All properties on currentConsent will be empty strings when no consent has been set.
    if(currentConsent.analytics == ""){
      window.Shopify.customerPrivacy.setTrackingConsent({
        "analytics": false,
        "marketing": false,
        "preferences": false,
        "sale_of_data": false,
      }, () => {
        console.log("Default consent set");
      });
    }    
  }
);

window.addEventListener("CookieConsent", function (event) {  
  // Wait for Shopify.customerPrivacy if needed.
  var existConsentShopify = setInterval(function () {
    if (window.Shopify.customerPrivacy) {
      clearInterval(existConsentShopify);

      var preferences = cookieTractor.consent.available.includes('functional') ? event.detail.current.includes('functional') : true;

      window.Shopify.customerPrivacy.setTrackingConsent({
        "analytics": event.detail.current.includes('statistical'),
        "marketing": event.detail.current.includes('marketing'),
        "preferences": preferences,
        "sale_of_data": event.detail.current.includes('marketing'),
      }, () => {
        console.log("Consent from CookieTractor set");
      })
    }
  }, 100);
});
</script>

Save the snippet.

Update theme.liquid

In the layout-folder, open the theme.liquid file and paste the Cookie Tractor header code snippet after the <link rel="canonical"...>-tag.

<script src="https://cdn.cookietractor.com/cookietractor.js" data-lang="en-US" data-id="xxxxxxx"></script>

After the {{ content_for_header }}-tag, paste this on a new line to render the newly created snippet.

{% render 'cookie-tractor' %}

Save the changes and navigate to the public store to ensure that the cookie banner is visible.