Dynamic text variables are currently supported on Loyalty Page Customisation only
Supported Surfaces
Supported on the following Loyalty Landing Page blocks:
Block | Text Fields | Available Variables |
Ways to Earn | Title, Subtitle |
|
Ways to Redeem | Title, Subtitle |
|
Points Overview | Greeting, Description |
|
VIP Tier Benefits | All 6 title/subtitle/progress fields |
|
Not supported on: Hero Banner, How It Works, FAQ (guest-facing blocks with no customer data), Checkout blocks, Customer Account blocks.
Available Variables
Universal (all blocks)
Variable | Description | Example Output |
| Customer's first name (empty if not set or logged out) | Sarah |
| Current points balance, formatted with locale separators | 1,250 |
VIP Tier Benefits only
Variable | Description | Example Output |
| Customer's current VIP tier name | Gold |
| Next VIP tier name (empty if at highest) | Platinum |
| Amount remaining to reach next tier, formatted by entry method | $380 / 120 points / 2 orders |
| Customer's current progress value, formatted by entry method | $120 / 500 points / 3 orders |
| Next tier's threshold value, formatted by entry method (empty if at highest) | $500 / 1000 points / 5 orders |
Formatting Rules
VIP tier variables ({remaining}, {progress}, {target}) are formatted based on the program's VIP tier entry method:
Entry Method | Format | Example |
Spend | Currency symbol + value | $120 |
Points | Value + "points" | 500 points |
Orders | Value + "orders" | 3 orders |
The currency symbol matches the shop's configured currency.
Usage Examples
Block | Field | Input | Output |
Ways to Earn | Title |
| Sarah's Rewards |
Ways to Earn | Subtitle |
| You have 1,250 points to spend |
Ways to Redeem | Subtitle |
| Redeem your 1,250 points |
Points Overview | Greeting |
| Hi Sarah, you have 1,250 Points |
VIP Tier Benefits | Logged In Title |
| Welcome back, Gold member! |
VIP Tier Benefits | Progress Subtitle |
| Earn $380 to reach Platinum |
Behaviour Notes
Variables are case-sensitive —
{currentTier}works,{CurrentTier}does not.Unknown variables render as-is (e.g.
{foo}stays as{foo}).Variables only resolve for logged-in customers. For logged-out visitors,
{firstName}and{points}resolve to empty strings.If a customer is at the highest tier,
{nextTier},{remaining}, and{target}resolve to empty strings.
CSS Targeting
Each variable renders as a <span> with BEM classes scoped to its block, allowing individual styling:
<!-- Input: "You have {points} points" on Ways to Earn --> <!-- Output: --> You have <span class="mage-ways-to-earn__var mage-ways-to-earn__var--points">1,250</span> points The class prefix matches the block name: mage-ways-to-earn, mage-ways-to-redeem, mage-points-overview, mage-tiers-table.
Example custom CSS:
/* Bold the points value across all blocks */ [class*="__var--points"] { font-weight: 700 !important; } /* Style the tier name in VIP Benefits */ .mage-tiers-table__var--currentTier { font-weight: 700 !important; } /* Highlight the remaining amount */ .mage-tiers-table__var--remaining { color: #dc2626 !important; }