> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/).

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](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

Legacy steps: [Custom styling with CSS (Legacy Banner)](/en/article/custom-styling-with-css-legacy-banner-1qt8dtl/).

||| **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

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Go to **Settings > Banner**.
3. Confirm the **New version** badge is visible on the Banner page.
4. Open the **Style** tab.
5. Scroll to **Custom styling** (you may see **Learn more** next to the section title — this article).
6. Under **CSS Rules**, choose **Desktop** and/or **Mobile** if you need different rules per viewport.
7. 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)](/en/article/how-to-fix-the-banner-hiding-behind-theme-elements-new-version-odvoph/).

### Example CSS

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

**Accent border on the cookie notice:**

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

**Accept and Decline button colors:**

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

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

**Move the consent widget slightly higher on the page:**

```css
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](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-1r1oqc2/).

### Related articles

* [How to customize banner style, colors, logos, and buttons (New Version)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/)
* [Custom styling with CSS (Legacy Banner)](/en/article/custom-styling-with-css-legacy-banner-1qt8dtl/)
* [How to fix the banner hiding behind theme elements (New Version)](/en/article/how-to-fix-the-banner-hiding-behind-theme-elements-new-version-odvoph/)