Custom styling with CSS

Overview

Most branding is easier in the app than in CSS. On the Style tab you can set logos, button variants, colors, fonts, surfaces (padding, radius, shadow, z-index), and animations without writing code. See How to customize banner style, colors, logos, and buttons (New Version).

Use Custom styling only when the Style controls cannot achieve what you need (for example a specific button layout, border treatment, or widget position).

New Banner. For stores with the New version badge on Settings > Banner. On the Legacy Banner, see How to switch to the new banner or switch back to the previous version.

Legacy steps: Custom styling with CSS (Legacy Banner).

Custom styling is available on paid plans (for example Plus and higher). It is not included on the free Basic plan. Upgrade from the plan selector in the app if the CSS editor is locked.

Where to open Custom styling

Open Shopify Admin > Apps > Pandectes GDPR Compliance.
Go to Settings > Banner.
Confirm the New version badge is visible on the Banner page.
Open the Style tab.
Scroll to Custom styling (you may see Learn more next to the section title — this article).
Under CSS Rules, choose Desktop and/or Mobile if you need different rules per viewport.
Paste your CSS, then Save when the unsaved-changes bar appears.

Test on the storefront in a private window. If you use Enable for admins, only logged-in staff will see the banner while you test.

Add banner CSS in Custom styling in the Pandectes app. CSS in your Shopify theme usually does not change the New Banner — use the editor on this page instead.

Prefer app settings before CSS

Goal	Use Style tab first
Colors and light/dark mode	Colors
Button look (filled / outlined, radius)	Buttons
Banner width, position, dialog type	Layout tab
Font family and size	Fonts
Shadow, padding, border, stacking above theme	Surfaces (including z-index)
Motion on open/close	Animations
Widget and notice position	Layout (notice / preferences / consent widget)

If the banner sits behind a sticky header or chat app, raise Surfaces > z-index before adding CSS. See How to fix the banner hiding behind theme elements (New Version).

Example CSS

Paste rules into CSS Rules, then Save. Adjust colors and sizes to match your brand.

Accent border on the cookie notice:

dialog.dialog.notice {
  border-left: 4px solid #00ffbf;
}

Accept and Decline button colors:

button.filled.allow.primary {
  background: #111111;
}

button.filled.deny.primary {
  background: #666666;
}

Move the consent widget slightly higher on the page:

button.widget.bottom.left {
  bottom: 24px;
}

For advanced color tweaks, the editor also supports CSS variables (for example --ai-bg, --ai-text) on the notice and preferences dialogs. Your support team or developer can help if you already use variables in the app.

Tips

Start with one small change, save, and check the storefront.
Use Desktop and Mobile CSS Rules when you need different styling on small screens.
If a change does not show, wait a minute and refresh the page.

Custom CSS from the Legacy Banner does not copy over when you upgrade. Re-add rules here after migration. See How to switch to the new banner or switch back to the previous version.

Updated on: 15/09/2026

Was this article helpful?