Skip to content

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.

Support

If you have questions about the installation, please contact us at info@cookietractor.com