Add custom CSS to every Charm surface

Charm is built to inherit your theme: the surfaces use your theme’s fonts, and their colors come from your brand palette. Sometimes a theme still needs a nudge — a font that cascades where it shouldn’t, a sticky header that sits above the floating widget, or two stacked landing blocks that want more room between them.

Branding → Custom CSS is one CSS box for all of it. The rules load on every storefront page where a Charm block or the app embed runs, so a single field covers the landing page, the floating widget, product-page points, the cart prompt, and the membership block.

No theme files are edited, and nothing is left behind if you uninstall — which also means agencies and freelancers can style Charm without theme code access.

Steps

1. Go to Settings → Branding and scroll to Custom CSS.
2. Paste your rules. Write plain CSS — no <style> tag, no Liquid.
3. Save. Reload your storefront to see the change.

Stable selectors

Only these four top-level class names are a styling contract — they keep their names across app updates:

Selector	Surface
.charm-landing	Every landing page block
.charm-widget	The floating widget (launcher and panel)
.charm-product-points	Product-page points
.charm-cart-redeem	The cart redeem prompt

Caution

Class names nested inside those elements are internal. They can be renamed in any app update, and rules that depend on them will silently stop applying. Anchor your rules on the four selectors above and reach inward with element, attribute, or child selectors where you can.

Two surfaces also publish their own deeper stable selectors, documented on their own pages: the cart prompt (charm-cart-redeem__*) and the header chip (charm-header-chip__*).

Examples

Match a theme’s body font, when the theme’s own rules cascade into the landing page:

.charm-landing { font-family: var(--font-body-family); }

Lift the floating widget above a theme header with a very high z-index:

.charm-widget { z-index: 10000001; }

Add breathing room between stacked landing blocks:

.charm-landing { margin-block: 2rem; }

Hide a surface on small screens:

@media (max-width: 749px) {
  .charm-product-points { display: none; }
}

Good to know

• Global vs. per-surface. The header chip and the cart prompt each keep their own Custom CSS field under Advanced. Those still work, and they are applied after the global CSS — so a rule there wins over an equally specific global rule. Use them for surface-specific tweaks and the Branding page for anything that should reach more than one surface.
• Specificity. Your CSS is injected after Charm’s stylesheets, so an equally specific rule of yours wins. If a rule doesn’t take, it is almost always specificity, not ordering: add a parent selector before reaching for !important.
• Limit. 4,000 characters — enough for theme fixes, not for a stylesheet. If you need more than that, use the Contact us button in the app; a fix that big usually belongs in Charm itself.
• It applies everywhere Charm renders, including surfaces you may not have in mind, so prefer scoped selectors over bare element rules.
• It is not applied inside the Loyalty Hub or the checkout and thank-you blocks — those are Shopify-rendered extensions that don’t accept custom CSS. Style them from their own settings instead.
• Theme editor preview. Custom CSS is applied in the theme editor too, so you can check your changes before publishing.