Skip to main content
Use metafields to build custom VIP tier displays — progress bars, tier badges, exclusive content, and more.

​
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>

        {% if tier.description %}
          <p>{{ tier.description }}</p>
        {% endif %}

        <ul>
          <li>{{ tier.points_required }} 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.points_required | minus: customer_loyalty.lifetime_points %}

        {% if points_to_next > 0 %}
          {% assign progress = customer_loyalty.lifetime_points | times: 100 | divided_by: next_tier.points_required %}

          <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 %}