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

  • Create a page in Shopify Admin → Online Store → Pages.
  • Open the theme editor for that page: Customize → Pages → select your page.
  • Add the "Loyalty Page" block from the JeriCommerce app blocks section.
  • Configure titles, colors, and section visibility from the block settings panel.
  • 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. SettingTypeDefaultDescriptionGeneralEnable Loyalty PageCheckboxEnabledShow or hide the entire blockContentHero TitleText"Our Loyalty Program"Main heading displayed at the topHero SubtitleTextarea"Join our loyalty..."Description below the headingGuest CTA URLURL/account/loginWhere guests are redirected when clicking the CTALogged-in CTA ActionSelectaccount"account" = go to account page, "widget_rewards" = open rewards widgetLogged-in CTA LabelText"See rewards"Button text shown to logged-in customersLogged-in CTA URLURL/accountURL when action is "Go to account page"SectionsShow How It WorksCheckboxEnabledToggle the 3-step explanatory sectionShow Earning RulesCheckboxEnabledToggle the ways to earn sectionShow VIP TiersCheckboxEnabledToggle the tiers sectionColorsPrimary ColorColor#0f0f0fButtons, accents, and badgesPrimary ContrastColor#fcfcfcText on primary-colored backgroundsSecondary ColorColor#f5f5f5Card backgroundsText ColorColor#0f0f0fHeadings and body textMuted ColorColor#888888Subtitles and descriptionsCustom CSSTextarea—Additional CSS overrides for advanced styling

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