Create a loyalty page in new customer accounts
Add the loyalty page to Shopify's new customer accounts, then design it with the New Accounts Dashboard builder: hero and greeting, a drag-and-drop block layout, and the colours that style it.
The loyalty page your customers see inside Shopify's new customer accounts is built from Roadmap, and the New Accounts Dashboard builder controls all of it: the hero and greeting at the top, which blocks appear, and how they're arranged. Open it from the top of the Loyalty Program dashboard, next to Universal Styler.
Add the page to customer accounts
The loyalty page ships as a Roadmap page inside new customer accounts, and customers reach it from the account menu. Add it once in your customer accounts editor.
Set the page background and accent colours
With the loyalty page selected in the customer accounts editor, the Main panel carries the colours for the page:
Background: the page background colour.
Accent: the highlight colour used through the page, including the points figures. Leave it on Default to follow your account theme.
These are Shopify's own settings rather than Roadmap's, which is why the builder's preview shows layout only: your colours and fonts come from here and flow through to the live page.
The hero
The top of the page is a hero banner with the welcome panel over it:
Intro text: shown in the hero banner. Leave it blank to hide the text.
Greeting: use
{name}to insert the customer's first name, for example Welcome back, {name}. Leave blank to hide the greeting.Show points balance: shows the points balance and expiry date in the hero panel.
Show expiring points: shows the customer's soonest-expiring points in the hero. It only appears when points can expire and the customer has some expiring.
Desktop hero (recommended 1440 × 900 px) and Mobile hero (recommended 750 × 1000 px). Leave the desktop image empty to use the default loyalty illustration; small screens fall back to the desktop image when no mobile one is set.
Text position: where the welcome panel sits over the hero image.
Image height (px): leave blank to let the hero stretch to the height of the blocks beside it, so their bottoms line up.
Card style
One setting applies to every block on the dashboard: Show a border around cards. It's off by default, with cards sitting on a tinted surface instead. The border colour comes from your customer account theme.
Configuring the loyalty page blocks
Each section of the page is a block you can switch on or off, drag into position, and open to set its width. The content inside them comes from your existing loyalty settings:
Welcome panel + balance: the hero panel itself. It runs extra tall, with room for up to three of the next four blocks stacked beside it: Tier status, Points balance, Referrals, and Birthday.
Tier status: the customer's current membership tier, with an optional Show progress to next tier.
Points balance: the customer's balance as its own card.
Referrals: the referral offer, from your Referral program.
Birthday: where customers enter their birthday.
These four blocks carry a Stackable tag in the sections list, which is how you spot the blocks that can sit beside the welcome panel.
Shop from collection: a product carousel from one collection that earns bonus points. Give it a Heading (blank uses the collection name) and a Description, and set Products per row.
Product rewards: the products customers can redeem points for.
Ways to redeem: the discount rewards customers can redeem points for.
Ways to earn: a grid of the active ways customers can earn points, with a Tile columns setting.
Your rewards: the customer's active discount codes, ready to copy and use. Discounts per row set to one per row puts the discount on the left and its code on the right.
VIP rewards & perks: all membership tiers and their benefits, with Tiers per row and an Edit tiers link through to each tier's storefront display settings.
How the layout works
A full-width block gets a row of the page to itself; two half-width blocks share a row side by side.
A tall half-width block takes one side, and up to three small blocks can stack on the other side. Only Points balance, Tier status, Birthday, and Referrals can share a side like that; each shows a Stackable tag while it's half width.
Any other block placed beside a tall one takes that whole side to itself, and scrolls if it holds a lot.
Order decides the pairing: a block joins the tall block's side when you drag it just below the tall one.
Blocks size themselves. Where you have a choice, opening the block shows a Height setting, and some settings only unlock at full width, like a block's Display mode (always open or collapsible).
Column counts inside half-width blocks are capped at two, since a third column leaves the cards too narrow to read.
The builder warns you when a choice will disturb the layout, so you can see the consequence before you save.
The editor's list mirrors the page: a grey card has a row to itself, a white card with a blue border shares its row, a blue bar down the left means the block was pulled into the row above it, and a faded card is switched off.
What customers see
Customers open the page from the account menu item you added, alongside Orders and Profile. Working top to bottom with every block on:
The hero carries your intro text, the greeting, and the customer's points balance, with the Current tier and Total points cards stacked beside it, each with a View history link into the customer's tier and point history.
Refer your friends shows both sides of the offer (what the advocate gets and what the friend gets), with an email field and Send invite.
Shop from collection renders each product with its price and an Earns N points badge, plus a Shop now button.
Product rewards cards show the product, its availability, and the points cost, with a Select reward button; Ways to redeem rows show each discount with its points cost and a Redeem button, and a redeemed reward swaps the button for the discount code with a copy action.
Ways to earn points lists each active earner with its description, and some carry actions: the review earner links straight to writing a review, and the birthday earner shows Add date until the customer has entered one.
Your rewards holds the customer's active discount codes, with an empty state until they have some.
VIP rewards & perks shows every tier with its icon and subtitle, and a Current pill on the tier the customer holds.
Give each tier its own look
The VIP rewards & perks block shows every tier, and each tier controls its own appearance from a Storefront display card on its Edit Membership Tier screen (the Edit tiers link in the block takes you there):
Tier icon: shown before the tier name. Left empty, a default icon is used for every tier.
Subtitle: leave blank to use the default milestone text.
Benefits: until you add custom benefits, the tier's reward defaults are shown. Add benefit to write your own list.
Where the content comes from
Icons, copy, and reward data are pulled from the loyalty app's other settings, so edit them at the source: earning actions, redemption options, and point values in Points, tier names and thresholds in Membership Tiers, and advocate and friend rewards in Referral Program.
Branding is Shopify-managed: colors, fonts, copy, and tier badge icons are controlled by Shopify's customer account theme editor, and changes there flow through. The builder's preview is a schematic of the layout, not the final styling.
Related guides
Customize the loyalty widgets: the storefront widgets and legacy-account loyalty block
Last updated