Storefront surfaces

Charm lives on Shopify’s native surfaces — no iframes, no scripts injected into checkout. Each surface is a Shopify extension you control from Visibility.

At a glance

Surface	What the shopper sees	How it’s added
Floating widget	Launcher on every page: balance, rewards, tier progress, membership card	Theme app block (`charm-loyalty-widget`)
Header chip	Greeting + live points balance in the theme header — standalone or merged into the account icon	Rendered by the widget embed — see Header chip
Product-page points	“Earn X points with this product” on PDPs	Theme app block (`charm-product-points`)
Membership block	Paid plans + “you’re a member” state	Theme app block (`charm-membership`)
Landing page	Dedicated page promoting the program: hero, earn, rewards, tiers, referral, FAQ	Theme app blocks (`charm-landing-*`)
Cart redemption	Apply points as a discount from the cart drawer or cart page	Theme app block (`charm-cart-redeem`) — see Cart redemption
Points anywhere	Live point values placed in any part of your theme	Theme app block or snippet — see Points Anywhere
Customer account hub	Full loyalty page inside Shopify customer accounts	Customer-account UI extension (live on install)
Checkout	Earn/redeem during checkout	Checkout UI extension
Thank-you & order status	Points-earned confirmation after the order	Checkout UI extension
POS	Loyalty at the register	POS UI extension — see POS

Each surface in detail

The always-on launcher. A logged-in shopper opens it to see their points balance, the rewards they can afford right now, progress to the next VIP tier and, if you sell memberships, their membership card. Guests see a sign-in prompt and your earning highlights. If you run a pet birthday bonus, the home screen also lists the customer’s pets with their birthdays.

To turn it on, see Add the floating loyalty widget.

Product-page points

A small “Earn X points with this product” line on the product page, so the reward is visible at the moment of intent. The number reflects the customer’s active multipliers (VIP tier, live campaigns), so a Gold member browsing during a 2× weekend sees the boosted figure.

See Show points earned on the product page.

Membership block

Presents your paid plans on the product page and flips to a “you’re a member” state for customers who already own one. Use it on a dedicated membership product, or alongside a hero collection.

Landing page

A dedicated storefront page that sells the program — a hero pitch, ways to earn, rewards, VIP tiers, a referral card, and an FAQ, built from theme app blocks you drop onto a Shopify page. Signed-in members get a personal greeting and live balances; guests see the join pitch. A program-aware FAQ, managed once, also renders here alongside the Loyalty Hub and widget.

See Add a loyalty landing page and Edit the loyalty FAQ.

Cart redemption

A redemption box in the cart itself, so points become a discount before the shopper ever reaches checkout. It can run in the cart drawer, on the cart page, or both, and you choose whether it sits above or below the cart contents.

See Redeem points from the cart.

Customer account hub

The full loyalty page inside Shopify’s native customer accounts — balance, point history, rewards to redeem, referrals, tier status, and memberships. It’s live the moment Charm is installed; no theme work required. Each earn and redeem card can carry a custom title and icon.

See Add the Loyalty Hub to customer accounts.

Checkout

Two checkout blocks: a Redeem points field where a shopper applies a reward without leaving checkout, and a Points to earn line showing what this order will add to their balance. Both are Shopify Checkout UI extensions, so they’re allowed in checkout on every plan including Plus — nothing is injected.

See Enable earn & redeem at checkout.

Thank-you & order status

After the order, a Points earned card confirms the points the customer just earned and their new balance — on both the thank-you page and the order-status page they return to later.

See Show points earned on the thank-you page.

POS

The same loyalty engine at the register — look up a member, earn, and redeem at the counter, with one balance shared across web and POS. Covered in detail on POS loyalty.

Rewards reserved for a higher tier

A reward you’ve switched off for lower VIP tiers still appears in the floating widget, the Loyalty Hub, and on the landing page, for guests and for customers below that tier. Instead of a redeem button it names the tier that unlocks it (for example “From Gold”), so the reward keeps pulling customers up the ladder rather than disappearing the moment someone joins. Customers in a tier where it’s available see it as a normal reward.

How data reaches the storefront

Shared content (perks, plan prices, styling) is cached with the page so guest pageviews stay fast, while per-customer data (balance, owned memberships, affordable rewards) loads only for logged-in shoppers — pages stay quick for everyone and personal for members.

Live-detection

Charm pings a lightweight surface-status signal when a block renders, so the Visibility page shows each surface as Active, Detected, or Inactive without you reporting it manually. See Check whether a storefront block is live.

See Theme app blocks for how to add them.