The VIP Tier Benefits section shows customers what each of your VIP tiers unlocks. Logged-in customers also see a progress bar showing how close they are to their next tier. You can show your benefits as a comparison table or as one card per tier, and use placeholders so the wording speaks to each customer.
To edit it, go to Loyalty Pages in Mage Loyalty. Under Storefront, find Landing Page and click Customise. Then select VIP Tier Benefits Table in the Sections list on the left.
The tiers themselves (names, thresholds and badges) come from your VIP tier settings. This section only controls how they are presented on your landing page.
This section lives on your loyalty landing page. If you have not set that page up yet, follow the loyalty page step in the Quick Start Guide first.
Header content
The first card, Header content, controls the text at the top of the section and the tier progress bar.
Titles
There are four title fields, split by whether the visitor is logged in.
Setting | What it does |
Logged Out Title | The heading for visitors who are not logged in. Defaults to Exclusive VIP Tier Benefits. |
Logged Out Subtitle | An optional line under the heading for visitors who are not logged in. Leave it blank to hide it. |
Logged In Title | The heading for logged-in customers. Defaults to Your VIP Benefits. |
Logged In Subtitle | An optional line under the heading for logged-in customers, for example You're {remaining} away from {nextTier}. Leave it blank to hide it. |
If you clear a title, the default title shows instead. Subtitles are different: a blank subtitle is simply not shown.
Progress section
The progress section is a progress bar shown above the benefits. It only appears for logged-in customers who are in a tier. Customers in your highest tier see Highest tier reached under the bar.
Setting | What it does |
Show progress section | Ticked by default. Untick it to hide the progress bar on your storefront. |
Progress Title | The heading above the bar. Defaults to Tier Status. Leave it blank to show no heading. |
Progress Subtitle | An optional line under the progress heading. Leave it blank to hide it. |
The progress fields are greyed out while Show progress section is unticked.
Placeholders
Placeholders are words in curly braces, like {nextTier}. On your storefront they are replaced with the real values for the customer viewing the page. You can use them in the title, subtitle and progress fields.
Under the fields in the editor you will see the list of available placeholders. Hover over one to see a sample value based on your own VIP setup.
Placeholder | What it shows |
| The customer's current tier name, for example Silver. |
| The name of the next tier up, for example Gold. |
| How much more the customer needs to reach the next tier. |
| The customer's progress so far. |
| The amount needed to reach the next tier. |
| For tiers that need two things at once (for example spend and orders), the amount still needed for the second one, already worded, for example 2 more orders. Shows nothing if your tiers only use one requirement. |
How numbers are shown
Spend-based tiers: your currency symbol is added for you, for example $150.
Points or orders-based tiers: the number shows on its own, for example 150. Add your own word after it, for example {remaining} more points or {remaining} more orders.
Visitors who are not logged in do not have a tier, so tier placeholders have nothing to show for them. Keep tier placeholders to the Logged In and Progress fields.
Conditional shortcodes
Shortcodes let one field show different text depending on where the customer sits in your tiers. Anything between the opening and closing tag is only shown when the condition is met.
Shortcode | When the text shows |
| Shown when the customer still has a higher tier to reach. |
| Shown when the customer is already in your highest tier. |
For example, this Logged In Subtitle covers both cases:
[nextTier]You're {remaining} more points from {nextTier}. Keep going![/nextTier][maxTier]You've reached our top tier. Enjoy every perk.[/maxTier]
Placeholders still work inside a shortcode.
Both shortcodes are hidden from visitors who are not logged in.
Shortcodes only work in the Logged Out Title, Logged Out Subtitle, Logged In Title and Logged In Subtitle fields, not in Progress Title or Progress Subtitle, where a shortcode shows as plain text.
If you mistype a tag, it shows as plain text rather than deleting your wording.
Choosing a layout: Table or Cards
In the VIP Tier Benefits card, use the Table and Cards buttons at the top right to choose how benefits are shown.
Layout | What it does |
Table | A comparison grid with benefits down the side and tiers across the top. Best for showing what changes between tiers. The table does not show if it has no benefits. |
Cards | One card per tier, each with its own list of perks. Best for a cleaner, more visual look. |
The table and the cards keep separate lists. Benefits you add in Table layout do not appear on the cards, and perks you add to a card do not appear in the table. Switching layouts never copies anything across, so set up the layout you plan to use.
Table layout
Tier headers
The Display options: tier headers dropdown controls the top of each tier column: Name only, Icon only (the tier badge), or Icon + name.
Threshold text
Under each tier name is a short line of text, such as Free to join or Spend $100. It shows Set threshold in the editor until you add your own. Click the pencil icon next to it to type your text. If you leave it empty, nothing shows under the tier name on your storefront.
Benefit rows
Each row is a benefit. In each tier column, choose how that benefit shows:
Option | What customers see |
Tick | Included in this tier. New benefits start as a tick in every tier. |
Cross | Not included in this tier. |
Custom | Your own short text, for example 1.5x or 100 points. A text box opens when you select it. |
Add a benefit: click + Add benefit, type a name, then click Add or press Enter. Each benefit name must be unique.
Rename: click the pencil icon on the row.
Remove: click the trash icon on the row.
Reorder: drag the row by its handle on the left. Customers see the same order.
Cards layout
In Cards layout, each tier gets its own card. You edit each card directly in the editor.
Card style
Card style | What it does |
Banner | A picture panel at the top of each card. Upload a Banner image per tier. The optional Header color fills the panel when no image is set. |
Icon | The tier badge at the top of the card (your custom badge image, or the tier colour with a Roman numeral). The optional Header color colours the band behind the icon, name and threshold. This is the default. |
Featured benefit
Each card has an optional Featured benefit field, shown above the perks. Use it for the tier's headline perk, for example 10% back in points. Wrap part of it in curly braces to make it stand out, for example {10%} back in points.
Curly braces in the Featured benefit field only add emphasis. They are not placeholders, so {nextTier} will not be replaced here.
Threshold text
Each card has the same editable threshold line under the tier name as the table. Click the pencil icon to change it.
Perks
Each card has its own list of perks.
Add a perk: click Add perk on a card, type a name, then click Add or press Enter. Each perk name must be unique on that card.
Rename: click into the perk name and edit it.
Remove: click the trash icon. This only removes the perk from that card.
Reorder: drag a perk by its handle to move it within the card.
Theme editor settings
Wording and layout are set in the app. Colours and spacing are set on the Mage VIP Tier Benefits block in your Shopify theme editor.
Setting | What it does |
Banner image | An optional banner shown above the cards. Only used in Cards layout. |
Primary Color | Used for headers and active cells. |
Section Background Color | The background of the section. |
Text Color | The main text colour. |
Custom vertical padding | Turn on to set your own Top padding and Bottom padding. |
Disable Customizer Styles | Removes the colours above so the block is styled only by your own CSS. |
Below the main card is an Advanced Settings card. Click View to open it and add Custom CSS for this section. The editor suggests the VIP tiers class names as you type, and a counter shows how close you are to the 64 KB limit. Your CSS is saved with the rest of the section.
Saving and going live
Save your changes. As soon as you edit a field, a save bar appears at the top of the screen. Click Save in the save bar.
Check the confirmation. A message saying Benefits saved successfully appears once the save is done.
Discard if needed. Click Discard in the save bar to go back to your last saved version.
Make sure the block is on the page. Click Customise page in Shopify Theme Editor at the top right of the Landing Page editor. Check that the Mage VIP Tier Benefits block is on your loyalty page. If it is not, add it, then click Save in the theme editor.
Common Mistakes to Avoid
Setting up benefits in one layout and switching to the other. The table and the cards keep separate lists, so switching layout shows an empty set of benefits or perks. Add your benefits in the layout you are using.
Using tier placeholders in the Logged Out fields. Visitors who are not logged in have no tier, so {nextTier} or {remaining} shows nothing. Keep those fields tier-free.
Clearing a title to hide it. A blank Logged Out Title or Logged In Title falls back to the default title. Only the subtitles and progress fields hide when blank.
Troubleshooting
The section does not show on my loyalty page
Check that the Mage VIP Tier Benefits block is added to the page in the theme editor.
Check that you have at least one VIP tier set up.
The progress bar is missing
Check that Show progress section is ticked.
The bar only shows to logged-in customers who are in a tier. Log in as a customer to test it.