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 in Webflow, 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 design it in Webflow, 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;
• 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, your .webflow.io address included: 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.

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. In the Designer it is always visible.

1. Build the banner

Add a Custom element with the tag smootify-consent. Put your text and the buttons inside it. Each button is a Webflow Button, or a Custom element with the tag button, with the custom attribute data-action:

2. Add the preferences panel

The preferences panel lets visitors choose category by category. Every banner needs it. Inside smootify-consent, make two Div 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.

Webflow keeps Checkboxes inside a Form Block, so put a Form Block in the preferences panel. In each Checkbox’s settings, set its Name to one of these:

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

• 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. Add a Custom element with the tag button and the custom attribute data-is="preferences-button", inside smootify-consent as above or anywhere else, for example in the footer. A click opens the preferences panel.

• It needs the banner. Without a smootify-consent on the same page, Smootify removes the button.
• It needs the button tag. A Webflow Button publishes a link, and does nothing here.
• 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, as combo 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, made with Webflow’s Popover element or a Div block with the popover attribute, 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.
• Webflow Analyze follows the visitor’s choice.
• 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, and never on your .webflow.io address.

• 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. In Webflow, go to Site settings › Custom code and paste this in Head code, before the Smootify loader, with your address followed by /_cks:

<script>
  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 your .webflow.io address, turn on Smootify’s debugger with Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac). It points out analytics ids set on a page without smootify-consent, and CSS that still uses the 1.x body class. See The debugger.

Coming from 1.x

• 2.0 no longer loads Shopify’s cookie banner. Its appearance settings in Shopify, the #shopify-pc__… selectors and its CSS variables no longer apply. A site that relied on that banner has none until you add smootify-consent.
• The body class is-shopify-cookie-banner-visible is now cookie-banner-visible: rename it in your styles.
• button[data-is="preferences-button"] keeps working, and opens your new banner.