# smootify-consent

> Cookie banner and preferences panel built in Webflow over Shopify's Customer Privacy API: shown while Shopify asks for consent and the visitor has not answered, the preferences while open. With button[data-is="preferences-button"] inside (one component, e.g. in the Footer, the banner in a [popover] or [consent-panel]) it stays for the button wherever the consent applies, the banner closed until asked; elsewhere it is hidden whole (2.0).

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/smootify-consent  
Updated: 2026-10-13

## At a glance

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

| 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 in [the guide](https://www.smootify.io/docs/features/cookie-consent).

## Where it can go

- **Anywhere** on the page.
- **Out of place,** it stays in the page and does nothing.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| `analytics`, `marketing`, `preferences`, `sale_of_data` (or `saleOfData`) | Checkbox (`name` exactly) | Checked: that kind of tracking is allowed, saved by `[data-action="save"]`; the boxes follow the stored consent, Webflow’s custom checkbox included. |

## Attributes on the element

- **Smootify writes** `is-loaded`, `is-required`, `is-open`, `is-sale-of-data-region`, `is-applicable` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Cookie consent](https://www.smootify.io/docs/reference/attributes/consent) | `data-action` | 11 |
| [Cookie banner (condition)](https://www.smootify.io/docs/reference/conditions/consent) | `consent-condition` | 1 |

## Loading

Its code loads only on pages that have `smootify-consent`.