Loyalty Page: Building Custom Templates with CDN Scripts

For merchants who need full control over the HTML layout or want to build a completely custom loyalty page, JeriCommerce provides standalone Liquid section templates that load the loyalty page engine directly from the CDN. This guide is aimed at developers building custom storefront experiences for their merchants.

‍

‍

When to Use CDN Mode

Choosing Between the Default Block and CDN Templates

• The merchant wants a completely custom layout that goes beyond what the theme editor settings allow.
• The development team prefers to own the HTML directly in the theme code.
• You need to integrate the loyalty page into an existing page template alongside other sections.

If the merchant is happy with the default look and just wants to tweak colors and copy, use the default template guide instead.

‍

‍

Setup Steps

Step 1: Get the Template

JeriCommerce provides two ready-made CDN templates. Copy the one that best fits your needs:

• Visual template (templates/visual.liquid) — Full-featured: hero, how-it-works steps, earning rows with SVG icons, tier cards, and loading skeleton. Same look as the theme block.
• Minimal template (templates/minimal.liquid) — Compact list layout: title + balance bar, earnings as a simple list, tiers as rows. Inline CSS, no external stylesheet needed.

You can obtain these from the JeriCommerce admin under Loyalty Page → Get template code, or copy directly from the repository files.

Step 2: Add to Your Theme

1. Go to Shopify Admin → Online Store → Themes → Edit code.
2. In the sections/ directory, click Add a new section.
3. Name it (e.g., jeri-loyalty) and paste the template code.

Step 3: Create a Page Template

Create a JSON page template that references your section:

// templates/page.loyalty.json
{
  "sections": {
    "loyalty": {
      "type": "jeri-loyalty"
    }
  },
  "order": ["loyalty"]
}

Alternatively, add the section to an existing page template via the theme editor: Customize → Add section.

Step 4: Create the Page

Go to Shopify Admin → Pages → Add page → Select the "loyalty" template.

‍

‍

How CDN Mode Works

Loading the Engine

CDN templates load the same JavaScript that powers the theme app extension block — bundled, minified, and always up to date:

<!-- Always the latest version -->
<script src="https://cdn.jericommerce.com/shopify/loyalty-page.js" defer></script>
<link rel="stylesheet" href="https://cdn.jericommerce.com/shopify/loyalty-page.css" />

The engine auto-detects the shop domain from the data-shop attribute on the root element, or falls back to window.Shopify.shop. Customer ID is passed via data-shopify-id using Liquid.

‍

‍

Template System: How Data Binding Works

Two Complementary Mechanisms

The template engine uses two systems to bind API data to your HTML:

1. Variable Interpolation — {varName}

Write {varName} tokens anywhere in your HTML text content. The JS engine walks all text nodes and replaces them with API data. This is the primary way to display data.

<h2>{hero.tierName}</h2>
<p>You have <strong>{hero.balance}</strong> {hero.balanceName}</p>

Inside repeating templates (tiers, earnings), variables are scoped to the template data:

<h3>{tier.name}</h3>
<span>{tier.requiredPoints}</span>
<span>{earning.points}</span>

Syntax uses single curly braces {key} — no conflict with Liquid ({{ }}), JS template literals (${ }), or CSS.

2. Data Attributes — data-jeri

Used for non-text operations that can't be expressed as text interpolation: