Cookie banner
The cookie banner asks visitors which cookies they accept, in your theme’s fonts, colors and buttons. It uses Shopify’s Customer Privacy API, so the choices are the ones Shopify, your apps and checkout respect.
It shows only where the law asks for consent (for example the EU, the UK or California) and only until the visitor chooses. Treble comes with the banner turned on in the Overlays group.
Before you start
Turn off Shopify’s own cookie banner: in Shopify admin, go to Settings > Customer privacy > Cookie banner. Otherwise visitors who need to give consent see two banners.
How to set it up
Step 1: Set up the banner
- In the theme editor, under Overlays, select Cookie banner. The banner shows in the preview while it is selected.
- Choose a Layout: a bar along the bottom, a card in a bottom corner, or a centered window over a dimmed page.
- Write the Heading and Text, and choose an Icon by name (
cookieby default, see the Icon library). - Leave Privacy link empty to link to your store’s privacy policy, or choose another page.
Step 2: Choose the buttons
- Accept all and Reject all record the choice for every kind of cookie. Turn off Show a Reject all button only if your regions allow it; many privacy laws expect rejecting to be as easy as accepting.
- Let visitors choose each kind of cookie adds Manage preferences: a panel with a switch for analytics, marketing and preferences cookies. Necessary cookies are always on. In regions with an opt-out of the sale of data, a fourth switch appears for it.
- Leave the button labels empty to use the default text, translated into your store’s languages, or type your own.
Step 3: Let visitors change their mind
- In Content > Menus, open your footer menu and add a link named, for example, Cookie preferences.
- Type
#cookie-preferencesas the link. Clicking any link that ends in#cookie-preferencesopens the preferences panel again.
Settings reference
Cookie banner
| Layout | Options: Bar along the bottom, Card, bottom left, Card, bottom right, Centered window. |
|---|---|
| Icon | Type an icon name, such as truck or screw. See all icons |
| Privacy link | Uses your store’s privacy policy when empty. |
| Privacy link label | Leave empty to use the default text in the store language. |
| Buttons | |
| Accept button | Leave empty to use the default text in the store language. |
| Reject button | Leave empty to use the default text in the store language. |
| Preferences link | Leave empty to use the default text in the store language. |
| Show a Reject all button | Turns this on or off. |
| Let visitors choose each kind of cookie | Turns this on or off. |
| Accept button style | Options: Primary, Accent, Same as Reject. |
| Colors | |
| Overlay opacity | Slider. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- The banner waits until the page has loaded, so it never delays the first view of your store.
- Choices are saved with Shopify, not in the theme: analytics, marketing pixels and apps follow them.
- When a visitor turns down preferences cookies, Treble forgets their recently viewed products and recent searches (see Theme settings > Privacy).
- Visitors can use the banner with the keyboard and screen readers. With reduced motion turned on, it appears without sliding.
Troubleshooting
Visitors see two cookie banners
Shopify’s banner is still on. Turn it off in Settings > Customer privacy > Cookie banner.
The banner never shows on my store
It only shows to visitors in regions where consent is required, and only until they choose. To check it, select the section in the theme editor, or click a link to #cookie-preferences.
The Cookie preferences link does nothing
The link must end in #cookie-preferences, and the cookie banner section must be in Overlays.