Loyalty Page: Default Template Setup

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" (set up to go 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¶

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¶

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

General¶

Content¶

Sections¶

Colors¶

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¶

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¶

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¶

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¶

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.