The Loyalty Program block is the centrepiece of the Account Sidebar. It shows logged-in customers their current points balance, VIP tier, and a call-to-action to access their rewards.
This block is only visible to logged-in customers. Guests will not see it in the sidebar, regardless of whether it is enabled.
Before You Start
This block displays data from your active loyalty program. Make sure your loyalty program is enabled under Loyalty in the left menu before configuring this block. If the program is not enabled, the block will have no data to display.
How to Configure the Loyalty Program Block
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Account Sidebar.
Click the Blocks tab.
Find the Loyalty Program block and expand it.
Make sure the block toggle is turned on.
Pick a Card Style, then configure the settings shown for that style and click Save.
Note
The available settings change depending on which Card Style you pick. The sections below cover each style separately.
Choosing a Card Style
There are two card styles to pick from. Each has its own set of settings, covered in their own sections below.
Balance Bar: a slim single-line bar showing the points balance and a call-to-action. Best for stores with a busy sidebar or a more subtle loyalty display.
Card: a full card with a prominent points balance, the customer's VIP tier badge, and a clear call-to-action button. Best when loyalty is a core brand feature.
Tip
Use the Preview panel on the right side of the Account Sidebar page to compare Balance Bar and Card side by side. The best choice depends on how many other blocks you have enabled and how prominent you want the loyalty program to feel.
Balance Bar Settings
When the Balance Bar style is selected, the following setting is available.
Field | What It Does | Example |
Label Text | The text shown on the right side of the bar, next to the chevron. This is the call-to-action that prompts the customer to open their rewards. | "View rewards" |
Tips for writing your Label Text
Keep it short, two to three words works best so it fits comfortably on the bar.
Make it an action, e.g. "View rewards" or "See perks", rather than a noun like "Rewards".
Card Settings
When the Card style is selected, the following settings are available.
Field | What It Does | Example |
Program Title | The heading shown at the top of the card. This is the first text customers see when they look at their loyalty card. | "Store Name Loyalty" |
Show points as currency value | Displays the monetary equivalent below the points balance (e.g. "$7.13 value"). Uses the conversion rate from your flexible reward. | Off |
Tips for writing your Program Title
Keep it short, one to three words works best.
Use your brand name to make it feel ownable, e.g. "Store Name Loyalty" rather than just "Loyalty Program".
Choosing an Action
The Action dropdown is available in both card styles. It controls where the customer goes when they click the call-to-action on the block.
Sidebar Page: opens the customer's rewards experience inside the sidebar itself. The customer can browse and redeem rewards without leaving the page they're on. Recommended for most stores.
External URL: sends the customer to a URL of your choice, typically your dedicated loyalty landing page. Use this if you've built a custom rewards page you want customers to land on.
Common Mistakes to Avoid
Common Mistake
If you turn this block on before enabling your loyalty program, the block will appear on the sidebar but won't have any points data to show. Enable the program under Loyalty in the left menu first.
Common Mistake
If you turn on "Show points as currency value" without an active flexible reward, no monetary value will appear under the points balance. The value is calculated from your flexible reward's conversion rate, so one needs to be active.
CSS Reference
If you're styling the Loyalty Program block from your theme stylesheet or the sidebar's custom CSS field, these are the classes the block exposes. The classes you'll target depend on which Card Style you've picked.
Shared
Class | What it targets |
| The outer section wrapper around the whole block. |
| The "Welcome back" greeting line. |
| The customer's first name inside the greeting. |
Balance Bar style
Class | What it targets |
| The Balance Bar container. |
| Left side of the bar containing the points value. |
| The points number itself. |
| The "Points" label next to the number. |
| Right side of the bar containing the call-to-action. |
| The Label Text on the call-to-action. |
| The chevron icon at the end of the action. |
Card style
Class | What it targets |
| The Card container. |
| Inner padded wrapper inside the card. |
| Header row containing the Program Title. |
| The Program Title text inside the card header. |
| The arrow indicator next to the header title. |
| The points balance area. |
| The monetary value shown when "Show points as currency value" is on. |
| Wrapper around the customer's VIP tier badge. |
| The tier badge itself. |
| The tier image inside the badge. |
| The call-to-action button at the bottom of the card. |
Troubleshooting
The block is enabled but showing no points data
Confirm your loyalty program is enabled under Loyalty in the left menu.
Check that the customer is logged in: this block is only visible to signed-in customers.
If the customer has not yet earned any points, their balance will show as zero. This is correct behaviour.
The VIP tier is not showing in the block
Confirm VIP tiers are configured and enabled under VIP Tiers in the left menu.
Check that the customer meets the points threshold for at least one tier. Customers who have not reached the first-tier threshold will not have a tier badge displayed.
VIP tier badges only appear when the Card style is selected. The Balance Bar style does not show tiers.
The currency value isn't showing under the points balance
Confirm the Card style is selected. The currency value only appears on the Card style, not the Balance Bar.
Confirm "Show points as currency value" is toggled on.
Make sure a flexible reward is configured and active under Loyalty > Rewards. The conversion rate from this reward is used to calculate the value.
The Program Title or Label Text is not updating on the storefront
Make sure you clicked Save after editing the field.
Check you're editing the field that matches your selected Card Style. The Card style uses Program Title, the Balance Bar style uses Label Text.
Clear your browser cache or open the storefront in an incognito window to see the latest version.
Still need help or can't find the answers you're looking for? Reach out to the Mage Loyalty team through our live chat support.