Loyalty Page: Setting Up and Customizing the Default Template

The JeriCommerce Loyalty Page is a public-facing page for your Shopify store that displays your earning rules, point conversion rates, and VIP tiers. When customers are logged in, they also see their personal progress — completed flows, current tier, and point balance. This guide covers how to set up and customize the default template using the Shopify Theme Editor.

‍

‍

Quick Setup

Adding the Loyalty Page Block

1. Create a page in Shopify Admin → Online Store → Pages.
2. Open the theme editor for that page: Customize → Pages → select your page.
3. Add the "Loyalty Page" block from the JeriCommerce app blocks section.
4. Configure titles, colors, and section visibility from the block settings panel.
5. Add to navigation so customers can easily find it.

The block loads its own JavaScript and CSS — no additional widget dependency is needed. However, the JeriCommerce Storefront Widget is required for the "View my rewards" CTA to work.

‍

‍

How It Works

Two-Phase Data Loading

The loyalty page fetches data from the JeriCommerce API in two phases:

Phase 1 — Public (no authentication required)

• Program information (name, balance name, configuration)
• Engagement flows (earning rules)
• Tiers (VIP levels)

Phase 2 — Logged-in customers (via Shopify app proxy)

• Customer-specific data (balance, current tier, flow completions)
• Personalized status updates on the page

During Phase 1, any variables referencing customer data (like {hero.balance}) are preserved as-is. They get replaced with real data once Phase 2 completes.

‍

‍

Theme Editor Settings

Available Configuration Options

All settings are accessible directly from the Shopify Theme Editor when the Loyalty Page block is selected.

‍

‍

Customizing the Default Template

What You Can Change

The default Liquid template is fully customizable. You can:

• Change copy — Edit any text and mix {variables} with your own wording.
• Reorder sections — Move tiers above earnings, or rearrange freely.
• Remove sections — Delete any <section> you don't need.
• Change HTML structure — Use tables, grids, lists — whatever fits your design.
• Add custom CSS — Use the Custom CSS setting or add <style> blocks.

Customizing Text and Copy

You can freely mix variables with your own copy in any text node. For example, to change the balance text in the hero:

<p class="jeri-tier-card-hero__balance">
  Your {hero.balanceName} balance: <strong>{hero.balance}</strong>
</p>

Customizing Earning Rows

Override the earning row template to change how earning rules are displayed:

<template data-jeri="earning-row">
  <div style="padding: 16px; border-bottom: 1px solid #eee;">
    <strong>{earning.title}</strong> — earn {earning.points}
    <p>{earning.description}</p>
  </div>
</template>
<div data-jeri="earnings-purchases"></div>
<div data-jeri="earnings-actions"></div>

Customizing Tier Cards

Override the tier template to change the tier card layout:

<template data-jeri="tiers">
  <div class="my-tier">
    <h3>Tier: {tier.name}</h3>
    <p>Requires {tier.requiredPoints} to unlock</p>
    <span data-jeri="tier.factor" data-jeri-hide-if="1">
      Multiplier: {tier.factor}x
    </span>
    <div data-jeri-html="tier.content"></div>
  </div>
</template>

‍

‍

CSS Variables

Two-Layer Architecture

All styling is controlled via CSS custom properties organized in two layers: merchant-facing variables set from the theme editor, and internal variables that resolve them with layout tokens.

Merchant-Facing Variables (set on :root)

These are set automatically by the Liquid template based on the theme editor color settings:

Internal Variables (set on .jeri-loyalty-page)

These resolve the merchant variables and add layout/structural tokens. Override them in the Custom CSS setting for fine-grained control:

Example: Dark Theme

.jeri-loyalty-page {
  --jlp-card-bg: #1a1a1a;
  --jlp-border-color: #333;
  --jlp-divider: #2a2a2a;
  --jlp-skeleton-bg: #222;
}

Example: Compact Spacing

.jeri-loyalty-page {
  --jlp-space: 12px;
  --jlp-border-radius: 8px;
}

‍

‍

Widget Integration

How the Loyalty Page and Widget Work Together

The "View my rewards" CTA uses #jeri=loyalty/rewards as its href. When the JeriCommerce Storefront Widget is active on the page, clicking this link opens the widget's rewards panel. This means:

• The loyalty page explains the program (public information, earning rules, tiers).
• The widget handles rewards, transactions, and account management (authenticated).
• Both work independently but complement each other via the #jeri= URL pattern.

‍

‍

Internationalization

Supported Languages

The loyalty page supports multiple languages based on the store's current locale:

• English (en) — default
• Spanish (es)

Unsupported locales fall back to English automatically. The locale is detected via the data-locale attribute on the root element, which is set using Shopify's {{ request.locale.iso_code }} Liquid filter.