Add a cookie compliance banner in Shopify

Cookie HTML banner saved as snippet in snippets/cookie-banner.liquid :

<style>
  #cookies-banner {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1em;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dcdcdc;
  }
</style>
<div id="cookies-banner">
  <span>This website uses cookies to ensure you get the best experience on our website.</span>
  <button style="margin-left: 1em;" onclick="handleDecline()">Decline</button>
  <button style="margin-left: 1em;" onclick="handleAccept()">Accept</button>
</div>
<script>
  function getBannerEl() {
    return document.getElementById('cookies-banner');
  }
  function hideBanner(res) {
    getBannerEl().style.display = 'none';
  }
  function showBanner() {
   getBannerEl().style.display = 'block';
  }
  function handleAccept(e) {
    window.Shopify.customerPrivacy.setTrackingConsent(true, hideBanner);
    document.addEventListener('trackingConsentAccepted',function() {
      console.log('trackingConsentAccepted event fired');
    });
  }
  function handleDecline() {
    window.Shopify.customerPrivacy.setTrackingConsent(false,hideBanner);
  }
  function initCookieBanner() {
    const userCanBeTracked = window.Shopify.customerPrivacy.userCanBeTracked();
    const userTrackingConsent = window.Shopify.customerPrivacy.getTrackingConsent();
    if(!userCanBeTracked && userTrackingConsent === 'no_interaction') {
      showBanner();
    }
  }
  window.Shopify.loadFeatures([
    {
      name: 'consent-tracking-api',
      version: '0.1',
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }
    initCookieBanner();
  });
</script>

Include the snippet on all pages, you should include the snippet in your main layout, which is commonly theme.liquid.

<body class="{{ template.name }}">
  <!-- theme.liquid content -->
  {% render 'cookie-banner' %}
</body>

About editorialstaff

Tags: