Advanced: custom theme display

Miko Loyalty handles all rewards display through the widget and checkout extension automatically. You don't need to touch your theme code for the programme to work.

However, if you want to add loyalty-specific content directly in your theme, such as showing a customer's points balance on their account page, or a "Earn X points" message on product pages, you can do so with Liquid and a small JavaScript snippet.

Show points balance on the account page

In your customers/account.liquid template (or your account page section), add a points display area and populate it with JavaScript:

<!-- In your account page template -->
{% if customer %}
  <div id="miko-points-display">
    <span id="miko-points-value">Loading...</span> points
  </div>

  <script>
    fetch('/apps/loyalty/balance')
      .then(r => r.json())
      .then(data => {
        document.getElementById('miko-points-value').textContent =
          data.points ? data.points.toLocaleString() : '0';
      });
  </script>
{% endif %}

Show "Earn X points" on product pages

Display how many points a customer will earn if they buy a product, a subtle but effective purchase motivator. In your product template:

<!-- In product.liquid or a product section -->
{% if customer %}
  <p class="miko-earn-preview" data-price="{{ product.price }}"></p>

  <script>
    (function() {
      // Replace 5 with your actual points-per-dollar earn rate
      var POINTS_PER_DOLLAR = 5;
      var els = document.querySelectorAll('.miko-earn-preview');
      els.forEach(function(el) {
        var price = parseInt(el.dataset.price) / 100; // Shopify price is in cents
        var points = Math.floor(price * POINTS_PER_DOLLAR);
        if (points > 0) {
          el.textContent = 'Buy this and earn ' + points + ' points';
        }
      });
    })();
  </script>
{% endif %}

Show VIP tier badge on product or collection pages

Use Shopify's customer tags to conditionally display tier-specific content. Miko automatically tags customers with their tier name when they qualify:

{% if customer %}
  {% if customer.tags contains 'miko-tier-gold' %}
    <span class="tier-badge gold">Gold Member, 2× Points Today</span>
  {% elsif customer.tags contains 'miko-tier-silver' %}
    <span class="tier-badge silver">Silver Member, 1.5× Points Today</span>
  {% elsif customer.tags contains 'miko-tier-bronze' %}
    <span class="tier-badge bronze">Bronze Member</span>
  {% endif %}
{% endif %}