Add the floating loyalty widget to your storefront

Put a floating launcher on every storefront page that opens a drawer with the shopper’s balance, ways to earn, and redeemable rewards. It’s one of several storefront surfaces you can enable in Charm.

Steps

1. Go to Visibility → Floating widget and click Set up on the Widget card (it reads Customize once the widget is live).
2. In the Floating widget card on the right, click Enable in theme editor, switch the Charm Loyalty app embed on, and save the theme.
3. Back in Charm, turn on Show the floating launcher and click Save.

Tip

The widget is a theme app embed, not a section block, so it shows on every page at once — you don’t place it per template. Use Customize to change colours, launcher style, position, and wording; those settings live in Charm and apply without re-editing the theme. Confirm it’s rendering with block detection.

New installs start hidden

On a fresh install the floating launcher is off, so nothing appears on your storefront until you switch it on here. The app embed itself still runs — it’s the shared runtime behind the header chip, cart redemption, and points-anywhere placements.

Use a photo in the panel header

With the Hero panel layout you can put a photo behind the top of the panel and choose what happens to it once a shopper leaves the home screen.

1. Go to Visibility → Floating widget and click Customize on the Widget card.
2. Under Panel layout, choose Hero. Under Panel header, choose Background image, click Choose file to pick the photo, and adjust Hero image coverage if needed.
3. Optionally turn on Points card offset and set Offset distance. It moves the points card down so the photo shows fully above it on the home screen.
4. Set On other screens:
   • Keep the image (the default): the photo stays on every screen. Screens such as ways to earn have no points card, so their first card moves up and covers part of the photo. Suits a photo that works as a background.
   • Keep the image and push content down: those screens also move their content down by the Offset distance, so the photo shows fully everywhere, at the cost of some vertical space.
   • Use a plain header: the photo appears on the home screen only, as a hero. Other screens get a plain band instead; choose Solid color (your primary color) or Gradient under Plain header style.
5. Click Save.

Gifts, sets and rewards in the panel

• Spending points on a free product adds it straight to the cart; a product with several variants asks for one first. See product rewards go straight into the cart.
• Gift codes from tiers, birthdays and points redemptions carry a Choose a gift link to the product or collection with the code applied.
• A tier gift set to Claimable reward waits under Gifts waiting for you until the member claims it.
• A Complete the set rule is listed as its collections, with a tick beside each one collected.
• If you run a pet birthday bonus, the home screen shows the customer’s pets and their birthdays.
• The ⓘ tips beside earning rules open on tap on phones.

What Charm weighs on a page

Charm loads only what a page actually uses:

Situation	What the page downloads
App embed on, launcher hidden, nothing else on the page	~3 KB — the runtime isn’t preloaded and no loyalty data is prefetched
Product or collection page with the points block	~4 KB of CSS (the product-points, points-badge and membership blocks share one small bundle)
Floating widget or panel in use	The widget bundle, loaded when it’s needed
Landing page	Its own bundle, on that page only

The runtime is served from your theme’s own content-hashed asset through Shopify’s CDN wherever possible, with Charm’s app proxy as a fallback. Nothing here is configurable — it’s how the surfaces load.

Related

• Concept: Storefront surfaces
• Show points earned on the product page
• Check whether a storefront block is live