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
Anchor link to section titled "Create a snippet to host the banner"The banner functionality consists of two main components:
- The banner HTML
- The banner JavaScript
For example:
The banner JavaScript
Anchor link to section titled "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
Anchor link to section titled "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:
|
function |
A callback function with a single error parameter. The function should include a conditional to actually handle the error. |
Include the snippet
Anchor link to section titled "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:
To preview the cookie banner on your theme, you'll need to limit data collection from the customer privacy section of your online store preferences. Then, you'll need to visit the website from one of your targeted regions for limited data collection. For more information about collecting consent for data collection, refer to the Customer Privacy API.