Add a cookie compliance banner to your theme

You can add a cookie compliance banner to your theme to allow customers to consent to tracking of non-essential cookies. This allows customers to consent to relevant, region-specific, tracking laws such as GDPR and CCPA.

There are two main aspects to adding this to your theme:

The functionality of the banner in the example below provides customers with the option to "accept" or "decline" cookie tracking, hides the banner once a selection has been made, and saves the selection to prevent the banner from being shown in the future. This selection is saved for 365 days, or until the customer clears their cookies.

Create a snippet to host the banner

The banner functionality consists of two main components:

For example:

The banner JavaScript

The banner JavaScript uses the Customer Privacy API to save the customer's selection, and the Shopify.loadFeatures method to prevent race conditions, ensuring that the script is loaded before it's called.

Shopify.loadFeatures

The Shopify.loadFeatures method accepts two parameters:

Type Description
array

An array of objects that define which features to load. Accepts two parameters:

  • name
  • version
function

A callback function with a single error parameter. The function should include a conditional to actually handle the error.

Include the snippet

With the cookie-banner.liquid snippet created, you need to reference it. As this functionality should be present on all pages, you should include the snippet in your main layout, which is commonly theme.liquid.

For example: