Customize brand colors across surfaces

Charm seeds a master brand palette when you install, and it cascades to every storefront surface — the widget, Loyalty Hub, landing page, emails, membership block, cart prompt, and product-page points. You style once and everything stays consistent, or you override the colors on a single surface without affecting the rest.

Steps

1. Open any surface’s page under Visibility — for example Visibility → Store widget.
2. Expand the Color theme section. It’s collapsed by default and shows a Customized badge when this surface diverges from your brand.
3. Edit the pickers, grouped into Text and buttons (Primary, Text), Surfaces (Background, Secondary background, Border), and Icons (Icon colour, Icon background). Each picker starts on the color the surface currently resolves to; changing one overrides just that field, while the rest keep tracking your brand.
4. Watch the surface’s live preview update as you edit.
5. Save.

Tip

To undo a surface’s custom colors and follow the brand palette again, expand its Color theme section and click Revert custom colors. The picker only shows this button once the surface actually diverges.

Caution

The Loyalty Hub lives inside Shopify’s customer accounts, so its layout and background follow your customer-account theme — only the icon colors apply there. The landing page hides the background picker because its cards sit on your theme’s own page background.

When colors aren’t enough

The pickers cover what Charm can express; your theme sometimes needs more — a font that has to cascade in, a nav that outranks the widget, spacing between stacked landing blocks. The Branding page carries a global Custom CSS field for exactly that, and it reaches every surface at once. A surface’s own Custom CSS is applied after it, so per-surface rules still win.

Related

• Concept: Storefront surfaces
• Custom CSS across every surface
• Add a loyalty landing page
• Add the Loyalty Hub to customer accounts
• Theme app blocks