The Loyalty Program block is the centrepiece of the Account Sidebar. It shows logged-in customers their current points balance and, if you set one, a call-to-action to access their rewards. If your program runs on store credit, it shows their store credit balance instead.
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 Pages tab, then Home.
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 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 once an Action is set (see Choosing an Action below).
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 what happens when the customer clicks the loyalty card.
No Action (the default): the card shows the balance but is not clickable.
External URL: sends the customer to a URL of your choice, typically your dedicated loyalty landing page, for example /pages/rewards.
Once an action is set, a Label Text field appears for the text on the card's clickable element, for example "My Rewards".
Note
Stores that already used the older Sidebar Page action still see it in the dropdown, along with its Enable VIP Tiers checkbox. It is not offered to other stores.
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
The tier badge on the loyalty card is controlled by the Enable VIP Tiers checkbox, which is only available with the older Sidebar Page action.
To show customers their tier and progress, add the Tier Progress block.
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. Label Text only appears once an Action is set.
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.