The new Loyalty page
Build your loyalty page inside Joy — a live preview beside every setting, and cards that read your real programs, tiers and balances.
Version 2 is on by default for stores that install Joy from now on. If your store is on Version 1, you switch it yourself — see Switch between Version 1 and Version 2. Your Version 1 setup stays saved either way.
What is different in Version 2
Version 1 spread the loyalty page across three places: blocks in the Shopify theme editor, a separate page the app injected, and settings with no preview. Version 2 replaces all three with one editor in Joy.
The page also stops repeating itself. In Version 1, program names, rewards and tier perks were text you typed into the page, so renaming a program in Joy left the page quietly saying the old thing. In Version 2, those cards read your live programs, tiers, balances and coupon inventory when the page loads.
Open the editor
In Joy, go to Onsite and open the Loyalty page tab.
Find the Loyalty page editor (V2) card and click Open editor.
The editor opens full screen, with the preview on the right and four tabs on top.
| Tab | What it holds |
|---|---|
| Design | Starting preset, theme and layout, the Set up checklist that gets the page live, and Custom CSS |
| Sections | Which sections are on the page, in which order, and the settings for each one |
| On-brand | Brand scan — read your storefront and match the page to it |
| Translations | Every word on the page, per language |
Above the preview, Preview as switches between Desktop and Mobile, and between Member, Guest, and — on stores using opt-in enrolment — Signed in · not joined. Check the guest view before you finish: it is what a shopper who has never joined sees.
Saving is publishing
The editor uses the Shopify save bar at the top of the screen. Save writes your draft and pushes it to the storefront in one step, so there is no separate publish button to remember. If the save fails, nothing reaches the storefront.
Closing the editor with unsaved changes discards them. Joy asks first.
A Publish changes button appears in one case only: when your saved design is ahead of what shoppers see, which happens if Claude or ChatGPT wrote changes through an AI connection without publishing them.
Start from a template
Design → Starting preset gives you eight starting points: Fashion, Beauty & Wellness, Food & Drink, Home & Garden, Sports & Fitness, Pets & Animals, Men's Grooming, and Minimal. Each one brings its own hero and referral imagery.
Applying a preset replaces your section order and visibility, your theme, layout, media and card styling, and the headings, descriptions and button labels in your primary language. It keeps your Custom CSS and every live program, tier and referral connection. Joy shows you that list before it applies anything.
Sections
The Sections tab holds two lists: Page sections, in the order shoppers see them, and More sections, the rest of the catalogue. Drag a section between the lists or use + to add one.
Each section on the page has a drag handle to reorder it, an eye toggle to hide it while keeping it, and × to take it off the page entirely. Removing a section does not delete what you wrote — add it back and your text returns.
The last section on the page cannot be removed. A page with no sections reads as "never set up", and the storefront falls back to a default page. Hide the section instead.
The catalogue has fifteen sections:
| Section | What it shows |
|---|---|
| Hero banner | Image or video, with separate headlines for signed-in shoppers and guests |
| Sign-up banner | An invitation to join, with its own copy for signed-in and guest states |
| How it works | Your program explained in steps |
| Ways to earn | Cards for your active earning programs — content from live data |
| Ways to redeem | Cards for your redeeming programs — same live data |
| VIP tiers | Tier comparison and the benefit matrix |
| Refer a friend | Referral offer, both sides of it, with companion imagery |
| FAQs | Questions and answers, reorderable, each one hideable |
| Rewards redemption | The rewards this shopper can redeem right now |
| My rewards | The coupons and rewards already in their account |
| Rewards activity | Their points history |
| Loyalty dashboard | Points summary, tier badge, coupons, points history |
| Referral management | Their referral link and referral activity |
| Loyalty pass wallet | Apple Wallet and Google Wallet buttons |
| Link accounts | Account linking |
Every section carries three settings of its own: Full width, an Audience (Everyone, Members only, or Non-members only), and a card theme that follows the page until you override it for that section.
Section panels hold layout, colors and media — not words. Every heading, button label and paragraph on the page is written in the Translations tab, even if your store has one language. Each panel carries an Edit text shortcut that takes you there.
Ways to earn and Ways to redeem share their program settings
Program order, program visibility and program icons are set once per program and apply to both sections. Reordering or hiding a program saves with the rest of the page when you click Save; icon changes save in the icon window itself.
Only programs that are active and flagged to show on the loyalty page appear at all.
VIP tiers
The tier columns and the benefit values are live — they come from your VIP Tier program, not from text on the page. The panel controls how that matrix is presented: table layout, the marks for included and excluded benefits, and card styling.
Desktop layouts are Cards, Card slider, Table, and Dark header; new blocks start on Table. Phones use their own layout, and a tier table becomes cards there, because tables do not fit a phone screen.
The tier badge you pick is stored on the tier itself, so the same badge shows in VIP tiers, the Loyalty dashboard and the loyalty widget. Create a VIP tier before choosing one. Tier names sit in an 82×82 px badge — short names like "Gold" fit comfortably, long ones wrap.
In Loyalty dashboard, Show VIP tier badge is off by default. Turn it on if you want the badge there; the VIP tiers section shows tiers regardless.
Where the words live
Translations holds the page's copy for every language your store has, grouped by section. It reads and writes the same values as Settings → Translations → Loyalty page, so a change in one place is a change in both.
Text is live as soon as you save. Unlike the design, copy does not wait behind a draft — the storefront reads it directly.
- Editing language picks which language you are writing. Languages themselves are added and removed in Settings → Translations, not here.
- Search loyalty-page translations finds a string by its text.
- On-brand rewrites the copy of the language you are in, in your store's voice.
- Revert to default restores Joy's built-in wording for the current language and keeps the text you wrote for your own steps and benefits. It cannot be undone.
Your own steps and tier benefits are keyed by their id, so renaming or reordering them does not scramble their translations.
Filling a second language only fills strings that are still empty. If you rewrite an English string that was already translated, the other language keeps its old wording until you update it there too.
Images and video
Images upload to Shopify Files, and the media browser lets you reuse any image or video already in your store. Video accepts MP4, MOV and WEBM up to 30 MB, or a direct HTTPS MP4 link. Shopify takes a few minutes to process a new video.
Custom CSS
Design → Advanced → Custom CSS takes standard CSS, including media queries and keyframes, scoped to this page. The limit is 32 KiB, counted for you as you type.
Editing Custom CSS requires a paid plan. On the free plan, CSS you already saved keeps working and can be removed, but not edited.
On-brand brand scan
On-brand → Brand scan reads your storefront and proposes a page that matches it. Enter your storefront URL — plus the storefront password, if your store has one; Joy uses it once and does not store it.
Pick what to scan: Colors and typography, Imagery, and Voice and copy. The design half and the copy half run independently, so one failing does not cost you the other. A scan takes around 40 seconds.
Results arrive as a review: your current value next to the proposed one, line by line. Nothing changes until you choose Apply selected changes or Apply all changes. Fonts are only proposed where you have not already chosen one.
The scan writes page-level theme values. Overrides you set on individual sections stay as they are.
Put the page on your storefront
Design → Set up tracks the two steps that make the page reachable. Both must be done.
Create the loyalty page
Click Create page and choose the address shoppers will use, under /pages/. Shopify decides the final handle.
Show it on your page
Click Edit in theme editor, create a template for your loyalty page, and add the Joy: Loyalty Page V2 block to it.
Give the loyalty page a template of its own. Adding the block to your shared page template puts the loyalty program on every page.
Joy cannot add the block for you — Shopify does not let apps write to a theme — so the second step happens in the theme editor. Once both steps are done, View the live page opens the real thing.
The block has one setting, Content: All sections for the whole page, or a single section if you would rather place sections yourself with several blocks. If you use both, the all-in-one block wins and the others stay quiet.
Until the page and the block both exist, the editor shows a banner saying the page is not live yet. Your design is still saved.
Switch between Version 1 and Version 2
New installs start on Version 2. Every other store — including stores that uninstalled and came back, whose themes still hold Version 1 blocks — stays on Version 1 until you switch.
Click Switch to Version 2 in the Set up panel or in your Loyalty page settings. Version 2 goes live immediately; if you have not saved a design yet, shoppers see the default page until you do. Your Version 1 setup stays saved, and you can switch back.
Limits worth knowing
| Limit | What happens |
|---|---|
| Page data, 64 KB | Publishing stops with a message rather than writing a partial page. Fewer sections, shorter copy, or fewer visible programs bring it back under. |
| Custom CSS, 32 KiB | The editor counts bytes and blocks a save above the limit |
| Video, 30 MB | Upload larger files to Shopify Files directly, then pick them from store videos |
| Last section | Cannot be removed from the page; hide it instead |
Frequently asked questions
Do I have to move to Version 2?
No. Version 1 keeps working, and switching is reversible in both directions.
What happens to my Version 1 blocks?
They stay in your theme with their settings. While the store is on Version 2, those block instances render the Version 2 page instead, and switching back restores the old rendering.
Can shoppers see the page while I work on it?
They see your last save. There is no separate staging copy — use Preview as in the editor to check states before you save.
Why can I not find the wording for a heading in its section panel?
Because it is in Translations, along with every other word on the page. Use Edit text in the panel to jump straight to it.