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

v2.0 beta

Open .md

On this page

At a glance
Where it can go
What it requires
Fields in the form
Attributes on the element
Attributes inside it
Loading

At a glance

data-action="accept"

Accept everything

Answer: Every category accepted.
Banner: Closes.

data-action="decline"

Decline everything

Answer: Every category declined.
Banner: Closes.

data-action="preferences"

Choose by category

Answer: None yet: the visitor answers in the panel (step 2).
Banner: Shows the preferences panel.

data-action="close"

Close without answering

Answer: None. Nothing that needs consent loads.
Banner: Hidden for this page. It shows again on the next page.

is-required

The visitor has to answer

Banner: Shows.
Body: cookie-banner-visible
Preferences button: Hidden.

is-open

The preferences are open

Panels: consent-panel="banner" hides, consent-panel="preferences" shows.
Body: cookie-banner-visible

No class

The visitor has answered

Banner: Hidden.
Preferences button: Shows. A click opens the preferences.

No class

No consent needed in the region

Banner: Never shows.
Preferences button: Shows, and opens the preferences, for example to refuse the sale of data.

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	`data-action`	11
Cookie banner (condition)	`consent-condition`	1

Loading

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