Quick Answer
Auto-theme renders your storefront, samples the primary CTA button and body styles, and applies the detected colors, border radius, and font to the cookie banner. Business plan only. One click, ~5 seconds, no manual color-picking.
What it does
On the Business plan, the Settings → Appearance tab has a "Match my store's theme" button under the Quick presets. Clicking it:
- Renders your storefront homepage in a headless browser
- Finds your most prominent primary CTA (usually "Add to cart" or "Shop now")
- Extracts the button's background color, text color, border radius, and font family
- Reads the page body's background and text colors
- Populates the banner customization form with what it found
You then review the result in the live preview and hit Publish changes to save. Nothing changes on your live banner until you save.
What it detects
| Setting | Source |
|---|---|
| Primary color | Background of your primary CTA button |
| Button text | Foreground of the primary CTA |
| Banner background | Body background color |
| Banner text | Body text color |
| Border radius | Border radius of the primary CTA (clamped to 24px) |
| Font family | Font family of the primary CTA |
Detection uses computed styles — the values your browser actually renders — not raw theme CSS. This works consistently across every Shopify theme regardless of how their CSS variables are named.
Limitations
- Password-protected stores. Auto-theme currently detects only public storefronts. Support for password-protected stores is coming.
- Dark storefront backgrounds. If your storefront has a dark background, the detected banner may look striking but not always right. Manually tweak from there.
- Custom fonts loaded via
@font-facein the theme. The banner runs in your Shopify app-embed context and doesn't automatically inherit theme-scoped font files. Auto-theme picks up the family name; if the font isn't web-safe, the banner falls back to a system font. Business-plan Custom CSS gives you full control if you need exact fidelity. - One-off runs. Auto-theme doesn't re-run automatically when you change your theme. If you rebrand, click the button again.
When to use manual customization instead
- You want a banner that deliberately contrasts with your storefront (some designers prefer this)
- You have a multi-brand store where the CTA color isn't representative
- Your storefront uses a color palette that would clash with the banner's information density
Manual customization stays available on both Pro and Business tiers.