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. The CTA button adapts to the visitor's login state: guests see "Join now", logged-in customers see "See rewards" (configurable to navigate to the account page or open the JeriCommerce widget). 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 "Open rewards widget" CTA action to work.

‍

‍

How It Works

Public Data Loading

The page fetches public data from the JeriCommerce API (no authentication needed):

• Program info — name, balance name, configuration
• Engagement flows — earning rules (purchases, social actions, referral, etc.)
• Tiers — VIP levels with points thresholds and multipliers

CTA Button Behavior

The CTA button uses Shopify's Liquid templating to render different content based on login state:

• Guest: "Join now" → links to login/registration page (configurable URL)
• Logged-in: "See rewards" → either navigates to the account page or opens the JeriCommerce widget rewards panel (configurable via the Logged-in CTA Action setting)

‍

‍

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

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

‍

‍

Points Display Format

How Points Are Shown

The earning.points field uses a compact format depending on the earning type:

For referral, only the referrer's points are shown in the badge. The friend's reward is mentioned in the description text.

‍

‍

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

When the Logged-in CTA Action is set to "widget_rewards", the 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)
• French (fr)
• German (de)
• Italian (it)

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.