Shopify basic cookie consent banner using the Customer Privacy API

cookie-banner.liquid

<script src="{{ 'cookie-consent.js' | asset_url }}" defer></script>

<!-- Cookie Consent Banner Start - inline strings and styles used for demo purposes only -->
<div js-cookie-banner="banner" style="display: none;">
  <p>This website uses cookies to ensure you get the best experience on our website. <a href="/policies/privacy-policy">Learn More</a></p>
  <button js-cookie-button="accept">Accept</button>
  <button js-cookie-button="decline">Decline</button>
</div>

cookie-consent.js

(() => {
  // Load the Customer Privacy API
  const loadCustomerPrivacyAPI = (callback) => {
    window.Shopify.loadFeatures([
      {
        name: 'consent-tracking-api',
        version: '0.1',
      },
    ], callback);
  };

  // Show the cookie consent banner
  const showConsentBanner = () => {
    const banner = document.querySelector('[js-cookie-banner="banner"]');
    if (banner) banner.style.display = 'block';
  };

  // Hide the cookie consent banner
  const hideConsentBanner = () => {
    const banner = document.querySelector('[js-cookie-banner="banner"]');
    if (banner) banner.style.display = 'none';
  };

  // Handle acceptance of cookies
  const acceptCookies = () => {
    window.Shopify.customerPrivacy.setTrackingConsent(true, hideConsentBanner);
  };

  // Handle declination of cookies
  const declineCookies = () => {
    window.Shopify.customerPrivacy.setTrackingConsent(false, hideConsentBanner);
  };

  // Attach event listeners to consent buttons
  const attachEventListeners = () => {
    const acceptButton = document.querySelector('[js-cookie-button="accept"]');
    const declineButton = document.querySelector('[js-cookie-button="decline"]');

    if (acceptButton) acceptButton.addEventListener('click', acceptCookies);
    if (declineButton) declineButton.addEventListener('click', declineCookies);
  };

  // Initialisation function
  const init = () => {
    loadCustomerPrivacyAPI((error) => {
      if (error) {
        console.error("Failed to load the consent tracking API:", error);
        return;
      }
      
      const consentStatus = window.Shopify.customerPrivacy.currentVisitorConsent();
      const shouldDisplay = window.Shopify.customerPrivacy.shouldShowBanner();
      if (consentStatus === '' && shouldDisplay) showConsentBanner(); // empty string for consentStatus indicates no choice has been made yet
      attachEventListeners();
    });
  };

  // Listen for the DOMContentLoaded event to ensure the HTML is fully loaded
  document.addEventListener('DOMContentLoaded', init);
})();