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 program 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 the app’s theme blocks, or with Liquid and a small JavaScript snippet.

Where to find it

• Theme blocks: in Online Store → Themes → Customize, add a block from the app: Loyalty Points (product, collection, home and account pages), Loyalty Cart, or Loyalty Rewards Page.
• Custom code: in Online Store → Themes → Edit code. The snippets below read the customer’s data from the app’s storefront endpoint at /apps/loyalty, which Shopify only answers for the signed-in customer.

How to set it up

1. Try the theme blocks first

   The Loyalty Points block already shows “Earn X points on this purchase” on product pages, with no code.

2. Duplicate your theme

   Before editing code, duplicate the published theme and work on the copy.

3. Add the snippet

   Paste one of the snippets below into the template or section, save, and preview while signed in as a test customer.

Options

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')
      .then(r => r.json())
      .then(data => {
        document.getElementById('miko-points-value').textContent =
          data.member ? data.member.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. The Loyalty Points block does this for you; if you prefer your own markup, 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

Read the customer’s tier from the same endpoint and show tier-specific content. The tier name is exactly what you called it on the VIP Tiers page:

{% if customer %}
  <span id="miko-tier-badge"></span>
  <script>
    fetch('/apps/loyalty')
      .then(r => r.json())
      .then(data => {
        var tier = data.member && data.member.tier;
        if (tier) {
          document.getElementById('miko-tier-badge').textContent =
            tier.name + ' Member, ' + tier.multiplier + '× Points Today';
        }
      });
  </script>
{% endif %}

Plan required