Display all VIP tiers
List the available tiers with their requirements:{% assign loyalty = shop.metafields.mage.loyalty.value %}
{% if loyalty.vip_program.enabled %}
<div class="mage-vip-tiers">
<h3>VIP Tiers</h3>
{% for tier in loyalty.vip_program.tiers %}
<div class="mage-tier-card">
<h4>{{ tier.name }}</h4>
<ul>
<li>{{ tier.threshold }} lifetime points to unlock</li>
<li>{{ tier.multiplier }}x points on every purchase</li>
</ul>
</div>
{% endfor %}
</div>
{% endif %}
Show current tier with progress to next
Combine customer and shop metafields to show tier progress:{% if customer %}
{% assign loyalty = shop.metafields.mage.loyalty.value %}
{% assign customer_loyalty = customer.metafields.mage.loyalty.value %}
{% if loyalty.vip_program.enabled and customer_loyalty %}
<div class="mage-tier-progress">
<p>Your tier: <strong>{{ customer_loyalty.vip_tier }}</strong></p>
{% assign next_tier = nil %}
{% assign current_found = false %}
{% for tier in loyalty.vip_program.tiers %}
{% if current_found and next_tier == nil %}
{% assign next_tier = tier %}
{% endif %}
{% if tier.name == customer_loyalty.vip_tier %}
{% assign current_found = true %}
{% assign current_tier = tier %}
{% endif %}
{% endfor %}
{% if next_tier %}
{% assign points_to_next = next_tier.threshold | minus: customer_loyalty.lifetime_points %}
{% if points_to_next > 0 %}
{% assign progress = customer_loyalty.lifetime_points | times: 100 | divided_by: next_tier.threshold %}
<p>{{ points_to_next }} more lifetime points to reach <strong>{{ next_tier.name }}</strong></p>
<div class="mage-progress-bar">
<div class="mage-progress-fill" style="width: {{ progress }}%"></div>
</div>
{% endif %}
{% else %}
<p>You've reached the highest tier!</p>
{% endif %}
</div>
{% endif %}
{% endif %}
Tier-specific content
Show different content based on the customer’s tier:{% if customer %}
{% assign customer_loyalty = customer.metafields.mage.loyalty.value %}
{% if customer_loyalty %}
{% case customer_loyalty.vip_tier %}
{% when 'Gold' %}
<div class="mage-tier-banner mage-tier-gold">
<p>Welcome back, Gold member! Enjoy 1.5x points on all purchases.</p>
</div>
{% when 'Platinum' %}
<div class="mage-tier-banner mage-tier-platinum">
<p>Welcome back, Platinum member! Enjoy 2x points and free shipping.</p>
</div>
{% else %}
<div class="mage-tier-banner">
<p>Earn more points to unlock VIP perks!</p>
</div>
{% endcase %}
{% endif %}
{% endif %}
Tier badge with color
Use the tier’s badge color for dynamic styling:{% assign loyalty = shop.metafields.mage.loyalty.value %}
{% assign customer_loyalty = customer.metafields.mage.loyalty.value %}
{% if loyalty.vip_program.enabled and customer_loyalty %}
{% for tier in loyalty.vip_program.tiers %}
{% if tier.name == customer_loyalty.vip_tier %}
<span
class="mage-tier-badge"
{% if tier.badge_color %}
style="background-color: {{ tier.badge_color }}"
{% endif %}
>
{% if tier.badge_image_url %}
<img src="{{ tier.badge_image_url }}" alt="{{ tier.name }}" width="20" height="20">
{% endif %}
{{ tier.name }}
</span>
{% break %}
{% endif %}
{% endfor %}
{% endif %}
Points multiplier display
Highlight the earning multiplier for the customer’s current tier:{% if customer %}
{% assign loyalty = shop.metafields.mage.loyalty.value %}
{% assign customer_loyalty = customer.metafields.mage.loyalty.value %}
{% if loyalty.vip_program.enabled and customer_loyalty %}
{% for tier in loyalty.vip_program.tiers %}
{% if tier.name == customer_loyalty.vip_tier and tier.multiplier > 1 %}
<p class="mage-multiplier">
You earn <strong>{{ tier.multiplier }}x points</strong> as a {{ tier.name }} member
</p>
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}