Articles on: Settings

Custom styling with CSS (Legacy Banner)

Overview

On the Legacy Banner, most appearance options live on Cookie banner > Style: layout (position, width, theme), colors, logo, fonts, z-index, and animations. Use custom CSS only when those fields are not enough.

Custom CSS / advanced styling is available on paid plans (for example Plus and higher), not on the free Basic plan.

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

New Banner steps: Custom styling with CSS.

Where to add CSS (Legacy Banner)

Open Shopify Admin > Apps > Pandectes GDPR Compliance.
Go to Cookie banner.
Confirm you do not see the New version badge (Legacy UI uses Behavior, Style, and Content tabs).
Open the Style tab.
Use Layout, Colors, and Advanced styling for fonts, z-index, and animations.
Add custom rules in the custom CSS area on the Style tab (included with Advanced styling on paid plans).
Save and test on the storefront in a private window.

How the Legacy Banner appears in the DOM

Typical roots on the storefront:

#pandectes-banner
CookieConsent classes: .cc-window, .cc-message, .cc-compliance, .cc-btn

Theme CSS can affect the legacy banner because it is not inside a shadow root like the New Banner. Still, prefer the Pandectes Style custom CSS field so rules travel with your Pandectes settings.

Prefer app settings before CSS

Goal	Legacy location
Bar vs floating vs popup position	Style > Layout > Position
Width	Style > Layout > Width
Colors	Style > Colors
Logo	Style > Banner logo
Fonts	Style > Advanced styling
z-index	Style > Advanced styling > z-index
Button labels	Content tab

Example selectors (verify on your store)

Scope rules under the banner root when possible:

Banner window

#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}

Message text

#pandectes-banner .cc-message {
  font-size: 14px;
}

Accept / Decline buttons

#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}

Open the preferences panel on your store and inspect class names. They vary by banner type (Preferences, Informative, etc.). See Cookie Banner Modes (Legacy Version).

Inspecting the live banner

Open the storefront with the banner visible.
Right-click the banner and Inspect.
Confirm #pandectes-banner or .cc-window in the DOM.
Copy class names from the nodes you want to style. Do not paste selectors from the New Banner guide (dialog.notice, pandectes-cmp).

Upgrading to the New Banner

Legacy custom CSS does not migrate automatically. After upgrade, re-create rules under Style > Custom styling on the New Banner. See:

Updated on: 05/10/2026

Was this article helpful?

Thank you!