Manual color-matching a cookie banner to your Shopify store is the kind of task nobody wants to do. You inspect an element, copy a hex code, paste it into the app, inspect the next element, repeat. Ten minutes later you have something that's close to your brand but not quite. Nobody's happy.
Today we shipped auto-theme — a Business-plan feature that renders your storefront, samples your primary CTA and body styles, and applies them to the banner in one click.
What it does
Open Settings → Appearance in Consentico. Under Quick presets, you'll see a new button: "Match my store's theme."
Click it. In about five seconds, the banner customization form populates with:
- Your CTA button's background color as the banner's primary color
- Your CTA text color as the button text color
- Your body background as the banner background
- Your body text color as the banner text color
- Your CTA's border radius (capped at 24px) as the banner's corner radius
- Your CTA's font family as the banner's font family
You review the result in the live preview. Nothing changes on your live storefront until you hit Publish changes.
How it works, honestly
There's no clever AI here. We render your storefront's homepage in a headless browser (the same infrastructure we use for compliance scans), walk the DOM looking for the most CTA-shaped button — button tag, prominent size, colored background, CTA-ish text like "Shop," "Add to cart," or "Get started" — and read its computed CSS styles.
Computed styles matter because every Shopify theme names its CSS variables differently. Dawn uses --color-button. Debut uses --brand-color. A custom theme might use --accent-primary. Reading the rendered color from the actual button sidesteps that whole problem.
Why Business only
Two reasons.
The first is honest: rendering a full storefront in a headless browser costs meaningful compute. It's the same infrastructure that runs your compliance scans, and Business is the tier where that infrastructure cost is baked in.
The second is positioning: auto-theme belongs alongside the other "make it look exactly like our brand" features that Business already includes — Custom CSS, banner white-labeling, unlimited deep scans. If you're on Business, you get the whole polish suite. If you're on Pro, you get full manual customization and can still get to a great result with a few minutes of color-picking.
Limitations
We wrote a full docs page but the short version:
- Password-protected stores aren't supported yet. Fix coming.
- Dark storefront backgrounds get detected accurately but sometimes need a nudge — a full-black banner looks bold on the settings page but heavy in context. Manual tweak from there.
- Custom fonts loaded via
@font-facein your theme won't automatically appear on the banner (the banner runs in a Shopify app-embed context and doesn't inherit theme-scoped font files). We detect the font family name; if it's not web-safe, the banner falls back gracefully. Custom CSS (also Business) gives you full control if you need pixel-perfect font fidelity. - Auto-theme doesn't re-run automatically. If you rebrand, click the button again. This is intentional — we don't want your banner colors changing under you.
What we didn't do
We considered scraping your theme source code (parsing theme.liquid, walking settings_data.json for the brand color setting). Every theme organizes those differently, and the extraction was fragile enough that we'd be shipping bug reports about "auto-theme picked the wrong color" for months.
We also considered writing a machine-learning color extractor that clusters palette colors from a screenshot. Interesting; unnecessary. Merchants aren't asking "what colors are in my store"; they're asking "make the banner look like the buy button." Sampling the buy button directly is the exact right answer to the exact right question.
Try it
Business-plan merchants: Settings → Appearance → Match my store's theme. Pro-plan merchants who want to try it: upgrade to Business — 7-day free trial, cancel anytime.
Feedback goes to asher@consentico.com — we're actively iterating on the CTA-detection heuristic and would love to know if it picks the wrong button on your store.