> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/loyalty-and-rewards/getting-started/create-a-loyalty-page-in-new-customer-accounts.md). # 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**. {% hint style="info" %} This builder is for **new customer accounts only**. The loyalty block in legacy (classic) customer accounts is customized inside the **Universal Styler** theme app instead, and settings here won't apply there. {% endhint %} ### 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. {% stepper %} {% step %} #### Open your customer accounts editor In Shopify, open the editor for new customer accounts, the same one you use to style the rest of the account area. {% endstep %} {% step %} #### Edit the account menu Select **Main**, then under **Navigation** open the **Menu** setting and choose **Edit**. This opens your **Customer account main menu**, listing the items customers see, such as Orders, Profile, and Subscriptions.

{% endstep %} {% step %} #### Add the loyalty page as a menu item Click **Add menu item**, give it a **Label** your customers will recognise, for example *Loyalty Page* or *Loyalty Dashboard*, then in **Link** search for and select **Loyalty Page** (listed under Roadmap). Save the menu.

{% endstep %} {% step %} #### Check it in the editor Back in the editor, the new item appears in the account menu. Select it to preview the loyalty page with your real program data. {% endstep %} {% endstepper %} {% hint style="info" %} Roadmap's other customer-account pages are added the same way, so you'll also see entries like Subscription Management and B2B Management in that link list. {% endhint %} ### 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. {% hint style="warning" %} The **Birthday** section is the only place customers can enter their birthday. Hiding it disables birthday-points collection for new customers. {% endhint %} 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](/loyalty-and-rewards/getting-started/customize-the-loyalty-widgets.md): the storefront widgets and legacy-account loyalty block * [Loyalty Tiers](/loyalty-and-rewards/membership-tiers-and-referrals/loyalty-tiers.md) * [Ways to earn points: overview](/loyalty-and-rewards/points-and-ways-to-earn/ways-to-earn-points-overview.md) * [Ways to redeem points: overview](/loyalty-and-rewards/points-and-ways-to-earn/ways-to-redeem-points-overview.md) * [Award points for birthdays](/loyalty-and-rewards/points-and-ways-to-earn/award-points-for-birthdays.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.roadmap.so/loyalty-and-rewards/getting-started/create-a-loyalty-page-in-new-customer-accounts.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.