Add a loyalty landing page
Give your program its own storefront page: a hero pitch, ways to earn, rewards, VIP tiers, a refer-a-friend card, and an FAQ — one of Charm’s storefront surfaces. Signed-in members see a personal greeting and live balances; guests see the join pitch. Everything is localized into all your published languages and inherits your brand colors.
- Go to Visibility → Landing page. Use the Preview (toggle Preview as signed-in customer) to see each section, and edit any wording under Translations & text — including the Advanced — all text expander for shared strings. Adjust the Color theme section if this page should diverge from your brand. Save.
- In Shopify admin, create the page: Online Store → Pages → Add page. Give it a title (for example “Rewards”) and save.
- Back on the Landing page settings, open the Add to your theme card and click Open theme editor. Select the page you created, then Add block and drop Landing: Hero onto it.
- Add the sections you want beneath the hero — Landing: How it works, Landing: Ways to earn, Landing: Ways to redeem, Landing: VIP tiers, Landing: Referral, Landing: FAQ, and Landing: Sign-up banner. Reorder them by dragging. Save the theme.
- Return to Visibility → Landing page and check the Status card shows recent activity for the page.
Layout and card style
Section titled “Layout and card style”Visibility → Landing page → Layout controls how the page’s cards are built. The live preview updates as you change them.
| Setting | Options |
|---|---|
| Card layout | Full — icon above a centred title. Roomy, best when the page leads with the program. Compact — icon beside the title with details paired underneath, so more fits on screen |
| Show card icons | Hide the icons entirely for a plainer, typographic page |
| Corners | Match the floating widget, or set the page’s own: Rounded, Pill, or Square |
Column counts live on the blocks in the theme editor. Landing: Ways to earn and Landing: Ways to redeem each have Columns (desktop) (2 to 5, default 4) and Columns (mobile) (1 or 2, default 1). With two columns on a phone, compact cards put the icon above the title so the title keeps its width.
Featured rewards
Section titled “Featured rewards”Rewards you mark as featured render as large cards with their product photo. Two controls sit on the Landing: Ways to redeem block:
- Featured cards position — put the featured group above or below the regular reward list.
- Featured rewards heading — the heading above the group, editable per language under Translations & text.
- Card image shape — Square (1:1), Portrait (3:4), or Landscape (4:3). Every card photo is cropped to the shape you choose, on desktop and mobile, so the row lines up however the product images were shot. The Loyalty Hub has the same control in the Charm admin, so the two surfaces can differ.
Featured product photos run edge to edge by default, matching the Loyalty Hub. A featured reward without a photo shows no image at all rather than an enlarged icon.
Keep long lists short
Section titled “Keep long lists short”Landing: Ways to earn and Landing: Ways to redeem both fold past a point you choose, so a long programme doesn’t turn the page into a wall of tiles. Everything below the fold sits behind a Show more button — nothing is removed, and one tap reveals the rest.
| Block | Setting | Default |
|---|---|---|
| Ways to earn | Ways to earn before “Show more” | 8 (two desktop rows) |
| Ways to redeem | Rewards before “Show more” | 4 (one desktop row) |
| Ways to redeem (featured cards) | Cards before “Show more” | 4 |
Set any of them to 0 to always show the full list with no button. On the earn block, the full-width featured sections (order-count milestones, subscription payment milestones, punch card, Complete the set, reward for spending) are never folded; only the compact grid beneath them is. The Landing: Ways to earn block has a checkbox for each kind: Feature order-count milestones, Feature subscription milestones, and Feature progress cards (punch card, set). Turn one off to show it as a simple tile instead; the rule itself doesn’t change. Reward for spending is featured automatically when it has more than one order-value tier.
Gifts and sets
Section titled “Gifts and sets”- Spending points on a free product adds it straight to the cart; a product with several variants asks for one first.
- Gift codes carry a Choose a gift link to the product or collection with the code applied, and a gift that is a choice of several products opens a picker with prices and Add to cart where possible.
- A tier gift set to Claimable reward waits under Gifts waiting for you with a Claim button.
- A Complete the set card shows a tile per collection. Photos stay grey until the collection is collected.
Your customers’ pets
Section titled “Your customers’ pets”If you run a pet birthday bonus, a signed-in customer who has added pets sees a Your pets band above the ways to earn: each pet’s name, birthday, and a countdown to their next reward. Customers add and edit pets from the rule’s card (Add a pet, or Manage pets once they reach your pet limit).
Before you launch
Section titled “Before you launch”While the loyalty program is switched off, the landing blocks render nothing on the live storefront — shoppers never see a half-built page. In the theme editor the same blocks render your real staged configuration, so you can place and style the whole page before launch. See previewing blocks before the program is live.
If the blocks are placed but the program is off, the Visibility page says so directly rather than reporting the page as broken.