How to Customize Your Consent Banner – Cookiebot for Shopify

The Cookiebot for Shopify app lets you customize the appearance of your consent banner. The level of customisation available depends on your plan.

Important

Banner customisation is available on the Essential and Pro plans only. Free plan users can view the customisation settings but cannot save changes.

Layout format

You can choose between two display formats for your consent banner:

Banner: A traditional bar or panel at the top or bottom of the page.
Modal: A center-page popup that overlays the content.

What you can customize (Essential and Pro plans)

Button text (e.g., 'Accept All', 'Deny', 'Settings')
Button colors and background colors
Banner text and descriptions
Banner position and layout format (banner vs. modal)
Logo

What cannot be customized in the Shopify app

The Shopify app does not support custom CSS or full HTML/CSS overrides. The following elements are not customisable through the app settings:

Custom CSS or custom code injections
Font family changes beyond the app's built-in options
The 'Save Settings' button color and the category toggle color (these use a system default)

Note

If you need pixel-perfect branding control with custom CSS, consider implementing Cookiebot manually via theme.liquid using your existing direct Cookiebot account. Note that this method is not recommended for most users.

Font size and theme compatibility

Some Shopify themes (including the popular Dawn theme) set a reduced base font size on the html element (e.g., 62.5%). This can cause the consent banner text to appear very small. To fix this:

Option 1 (recommended for accessibility): Move the font-size declaration from the html element to the body element in your theme CSS.
Option 2 (technical fix): Use the --uc-font-scale CSS variable to rescale banner fonts. Contact support for guidance.

Privacy trigger — controlling where it appears

The privacy trigger is the small icon that allows visitors to reopen the consent banner and modify their preferences at any time. You can control its behaviour:

Reposition: Move the trigger to different corners of the page.
Page visibility: Show the trigger on all pages, or limit it to specific pages — for example, hiding it from the homepage while keeping it visible on product and checkout pages.

How to apply your changes

Go to the Cookiebot app in your Shopify admin.
Navigate to Customize Banner.
Make your desired changes.
Click Save Changes.

Changes take effect on your storefront within 15–30 minutes.

Important

If you customise the banner while on the Free plan and then upgrade your plan via the in-app popup, your customisation changes will not be saved automatically. After completing the upgrade, return to the Customize Banner page and click Save Changes again.