Cookie consent

In regions with privacy laws, such as the EU and the UK, visitors must agree before a site tracks them. Every site needs the banner, even one that does not sell in Europe: it shows only to the visitors who have to answer, and stays hidden for everyone else. Smootify does not add one: you write it as a component, like any other part of the site. The visitor’s choice is saved with Shopify’s Customer Privacy API, so the checkout, Shopify’s analytics and the pixels Smootify loads all follow it.

How it fits together

What Smootify needs:

• one smootify-consent element on every page. A visitor can arrive on any page, so put it in a component that every page uses, such as the footer or the layout;
• inside it, the buttons that accept and decline, and a button that opens the preferences;
• a preferences panel, where the visitor chooses category by category;
• a preferences button, so the visitor can change their choice at any time.

Visitors must always be able to choose their preferences, not only accept or decline everything, so the panel and the button are part of every banner.

It works on any domain: Smootify asks Shopify for the visitor’s region on the first visit and keeps the answer on your domain.

What is up to you: the text, the layout and where it sits (a bar at the bottom, a box in a corner).

One component for all of it. The simplest setup puts everything in one smootify-consent, in the footer component: the preferences button, and the banner and the preferences panel in a popover. The button stays in the footer; the popover is fixed where you want the banner, for example at the bottom of the window, not next to the button: it opens by itself at the top of the page too.

<smootify-consent>
  <button type="button" data-is="preferences-button" popovertarget="consent">Cookie preferences</button>
  <div id="consent" popover>
    <div consent-panel="banner">…</div>
    <div consent-panel="preferences">…</div>
  </div>
</smootify-consent>

Without a preferences button inside it, Smootify shows the element only while the visitor has to answer, or while the preferences panel is open, and hides it the rest of the time. With the button inside, the element stays in the page with only the button wherever consent applies: keep the banner’s text and buttons inside the popover or a consent-panel, since everything else in the element stays visible with the button. Smootify adds no other style: position the banner yourself.

1. Build the banner

Write a smootify-consent element. Put your text and the buttons inside it. Each button is a button element with the attribute data-action:

<smootify-consent>
  <div>We use cookies to measure the site and to show relevant ads.</div>
  <button type="button" data-action="accept">Accept all</button>
  <button type="button" data-action="decline">Decline</button>
  <button type="button" data-action="preferences">Preferences</button>
</smootify-consent>

2. Add the preferences panel

The preferences panel lets visitors choose category by category. Every banner needs it. Inside smootify-consent, write two blocks:

• one with consent-panel="banner", holding the first message and its buttons, including data-action="preferences". It hides while the preferences are open;
• one with consent-panel="preferences". It shows only while the preferences are open.

Put a <form> in the preferences panel to hold the checkboxes. Each checkbox is <label><input type="checkbox"><span form-label>Label</span></label>. Set its name to one of these:

Then add a button with data-action="save". The form only holds the checkboxes: it is never sent.

<div consent-panel="preferences">
  <form>
    <label><input type="checkbox" name="analytics"><span form-label>Analytics</span></label>
    <label><input type="checkbox" name="marketing"><span form-label>Marketing</span></label>
    <label><input type="checkbox" name="preferences"><span form-label>Preferences</span></label>
    <div consent-condition="sale-of-data"><label><input type="checkbox" name="sale_of_data"><span form-label>Allow the sale of my data</span></label></div>
    <button type="button" data-action="save">Save my choices</button>
  </form>
</div>

• Checked means yes. When the panel opens, each checkbox shows the visitor’s current choice. Write every label so that checked means “allowed”: “Allow the sale of my data”, not “Do not sell my data”.
• Save saves the checked boxes and closes the banner. Add a checkbox for each of analytics, marketing and preferences: a missing one counts as declined.

3. Let visitors change their mind

Visitors must be able to change their choice later, as easily as they made it. Write a button with the attribute data-is="preferences-button", inside smootify-consent as above or anywhere else, for example in the footer. A click opens the preferences panel.

<button type="button" data-is="preferences-button">Cookie preferences</button>

• It needs the banner. Without a smootify-consent on the same page, Smootify removes the button.
• It needs the button tag. A link does nothing here: write a <button type="button">.
• It hides while the banner is on screen, and shows again once the visitor has answered.
• It shows only where consent applies: where Shopify asks for consent, where the visitor has already answered, and in regions with the sale-of-data choice, such as California, where it is the “Do not sell or share” link those laws ask for. Elsewhere it is hidden, and so is a smootify-consent that holds it, without leaving a gap. It also stays hidden until Shopify has answered. Smootify marks the button and the element with is-applicable when it applies.

Style and placement

The banner goes through these states. Style them with the classes:

• More classes. smootify-consent also gets is-sale-of-data-region in regions with the sale-of-data choice, and is-applicable where consent applies. Use cookie-banner-visible on the body, for example, to move a chat button up while the banner shows. See state classes.
• In a popover. A [popover] inside smootify-consent opens and closes with the banner. Escape or a click outside closes it and hides the banner for this page, without an answer. See Popovers.
• The market suggestion waits until the banner is closed before it shows: see Market suggestion.

The full list of attributes is in the Reference: consent attributes and smootify-consent.

What follows the choice

• The pixels Smootify loads: the Meta Pixel, Google Analytics 4, Google Ads and the TikTok Pixel, each with the category it needs. See Analytics and pixels.
• Shopify’s analytics: page views and additions to the cart reach your store’s reports once the visitor allows analytics. Visits and returning visitors need the analytics proxy: see below.
• The checkout receives the same choice from Shopify.
• Your own scripts: a developer reads the choice with the JavaScript API and the consent_changed event.

The analytics proxy

Shopify no longer reads the shopify_y and shopify_s cookies that a site sets in the browser. It now gives the visitor and session tokens from its own server, in a response header, and a site on another domain gets them through a small proxy. Without it, Shopify’s reports cannot tell a new visit from a returning visitor. Smootify calls the proxy once per visit, only after the visitor allows analytics.

• Server plan: Smootify’s own proxy does it. There is nothing to set up.
• Free and Lite plans: deploy the free proxy on your own Cloudflare account, with one click.

1. Open shopify-headless-proxy and click Deploy to Cloudflare. Log in to Cloudflare and confirm. You get an address such as https://shopify-headless-proxy.your-account.workers.dev.
2. Add this script to the <head> of src/layouts/Base.astro, with your address followed by /_cks:

<script is:inline>
  window.smootifyCksEndpoint = "https://shopify-headless-proxy.your-account.workers.dev/_cks";
</script>

The proxy needs no domain or DNS change, and one call per visit stays well within Cloudflare’s free plan. To accept calls only from your site, set its ALLOWED_ORIGIN variable to your domain, such as https://www.example.com, in the Cloudflare dashboard.

The same proxy can also open the panel of Shopify’s chat, if you add it: see Shopify Inbox chat.

Before you publish

On the dev server and on your *.workers.dev address, turn on Smootify’s debugger with Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac), or open the page with ?smootify-debug. It points out analytics ids set on a page without smootify-consent. See The debugger.