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`)
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-*`)
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.

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.

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.

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.