# Cookie consent

> Write the cookie banner and the preferences panel as a component with smootify-consent, over Shopify's Customer Privacy API, and let visitors reopen it from a preferences button.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/features/cookie-consent  
Updated: 2026-10-21

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.

> [!NOTE]
> Before you start, turn on consent collection in Shopify: in the Shopify admin, open **Settings › Customer privacy**, then **Cookie banner**, activate it and choose the regions where visitors must answer. Shopify decides where consent is needed from these settings, and your banner shows only in those regions, and only to visitors who have not answered yet. Shopify's own banner does not show on your site: only the one you build here.

## 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.

```html
<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`:

- `data-action="accept"`: accepts every category and closes the banner.
- `data-action="decline"`: declines every category and closes the banner.
- `data-action="preferences"`: opens the preferences panel (step 2).
- `data-action="close"`: hides the banner for this page without an answer. Nothing that needs consent loads, and the banner shows again on the next page.

```html
<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:

| Checkbox Name | Checked, the visitor allows | Without its Checkbox, Save… |
|---|---|---|
| `analytics` | measuring the site, such as Google Analytics and Shopify's reports | declines it |
| `marketing` | advertising, such as the Meta, Google Ads and TikTok pixels | declines it |
| `preferences` | remembering their settings on the site | declines it |
| `sale_of_data` | the sale or sharing of their data, under US privacy laws. It only matters in some regions, such as some US states: put its Checkbox inside an element with `consent-condition="sale-of-data"`, which shows only there | leaves it as it was |

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

```html
<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.

```html
<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:

| State | Classes | The banner and the preferences button |
|---|---|---|
| The visitor has to answer | `is-required` on `smootify-consent`, `cookie-banner-visible` on the body | the banner shows; the preferences button is hidden |
| The preferences are open | `is-open` on `smootify-consent`, `cookie-banner-visible` on the body | `consent-panel="banner"` hides, `consent-panel="preferences"` shows |
| The visitor has answered | none | the banner is hidden; the preferences button shows and opens the preferences |
| No consent needed in the region | none | the banner never shows; the preferences button shows and opens the preferences, for example to refuse the sale of data |

- **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](https://www.smootify.io/docs/astro/reference/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](https://www.smootify.io/docs/astro/build/popovers).
- **The market suggestion** waits until the banner is closed before it shows: see [Market suggestion](https://www.smootify.io/docs/astro/features/market-suggestion).

The full list of attributes is in the Reference: [consent attributes](https://www.smootify.io/docs/astro/reference/attributes/consent) and [`smootify-consent`](https://www.smootify.io/docs/astro/reference/elements/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](https://www.smootify.io/docs/astro/features/analytics).
- **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](https://www.smootify.io/docs/astro/developers/javascript-api) and the [`consent_changed`](https://www.smootify.io/docs/astro/reference/api/events/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.
3. Open [shopify-headless-proxy](https://github.com/smootify/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`.
4. Add this script to the `<head>` of `src/layouts/Base.astro`, with your address followed by `/_cks`:

```astro
<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](https://www.smootify.io/docs/astro/features/shopify-inbox).

## 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](https://www.smootify.io/docs/astro/start/debugger).

> [!STUCK]
> - **The banner always shows, even after an answer.** Smootify's stylesheet is missing, and it is the stylesheet that hides the banner. The integration writes it as a `<link>` before the loader: check that `runtimeCssUrl` of the integration has not been changed to a wrong address. See [Install Smootify](https://www.smootify.io/docs/astro/start/install).
> - **The banner never shows.** Consent collection is off in Shopify (**Settings › Customer privacy › Cookie banner**), so Shopify asks for consent nowhere. Or the store does not ask for it in the visitor's region, the visitor already answered, or your own styles hide the element. Smootify only hides it: it never shows what your styles hide.
> - **The preferences button disappears.** The page has no `smootify-consent`: put the banner in a component that every page uses, such as the layout or the footer. Or consent does not apply in the visitor's region, and the button is hidden on purpose.
> - **The preferences button does nothing.** It is not a `button` element. Use a `<button type="button">`.
> - **Save declines a category the visitor never saw.** A category without its Checkbox counts as declined. Add a Checkbox for each of `analytics`, `marketing` and `preferences`.
> - **The banner comes back on the next page.** The visitor closed it with `data-action="close"`, or closed its popover from outside. That hides it for one page, without an answer.