Shopify and CookieTractor

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.