Skip to content

Shopify & 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 CookieTractor 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, then navigate to the public store to ensure the cookie banner is visible.

Support

If you have questions about getting started with Shopify, feel free to contact us at info@cookietractor.com