The JeriCommerce Loyalty Hub is the recommended Shopify experience for new loyalty implementations. It has two surfaces that work together:

  • Storefront hub - A brandable Online Store page that explains the program to guests and becomes a full loyalty experience for logged-in customers.
  • Customer account hub - A built-in Shopify New Customer Accounts destination that gives logged-in customers the loyalty hub inside their account area.

Which Hub Surface to Use

Need Recommended surface Why
Public program explanation Storefront hub Guests can see earning flows, rewards, and program benefits before they join or log in.
Logged-in storefront loyalty actions Storefront hub Customers can see their real points, tier points, and tier status, redeem rewards, and complete earning flow actions.
Default brand customization Storefront hub Merchants can adjust copy, colors, and visible sections exposed in the Shopify theme editor.
Account profile placement Customer account hub Customers can open the full loyalty hub from Shopify New Customer Accounts without adding separate account extensions.

Most stores should use both: the storefront hub is the main loyalty destination, and the account hub keeps loyalty actions available inside the customer's account profile.

Use this structure when setting up a new Shopify loyalty experience:

  1. Create a public storefront hub page.
  2. Add it to store navigation as "Rewards", "Loyalty", or the merchant's program name.
  3. Use it as the main loyalty destination for guests and logged-in customers.
  4. Add the Loyalty Hub link to the Shopify customer account navigation when the store uses New Customer Accounts.
  5. Add smaller Shopify extensions only when needed for specific placements such as product pages, cart, checkout, or wallet download CTAs.

The cleanest customer journey starts with the storefront hub for discovery and full loyalty actions, then adds the customer account hub link for account-profile access.

Storefront Hub

The storefront hub is the best place to present the loyalty program in the merchant's own brand style. It belongs in Online Store > Pages and is customized from the Shopify theme editor like any other theme section or app block.

Use it for:

  • Program intro and brand story for guests.
  • Ways to earn points and available rewards as program explanation for non-logged-in visitors.
  • Logged-in customer status, including real points, tier points, and tier progress.
  • Reward browsing and redemption.
  • Earning flow actions customers can complete from the storefront.
  • Wallet pass, referral, and other loyalty actions exposed by the hub.

Set It Up

1

Create the page

In Shopify, go to Online Store > Pages and create a page for the loyalty program.

2

Open the theme editor

Go to Online Store > Themes > Customize, open the page template you want to use, and add the JeriCommerce Loyalty Hub app block.

3

Customize the content

Update the hero title, subtitle, colors, and visible sections. Keep the copy clear for both guests learning about the program and logged-in customers using their loyalty account.

4

Add it to navigation

Add the page to your store menu so customers can find it from the storefront.

What Customers See

The storefront hub changes based on whether the visitor is logged in:

Visitor state Experience
Guest or non-logged-in customer Program explanation, earning flows, rewards, tiers, and prompts to log in or join.
Logged-in customer Real points, tier points, tier status, reward redemption, earning flow actions, and available loyalty actions.

This means the storefront hub works as both the public program page and the logged-in loyalty dashboard.

Recent storefront refinements make the hub easier to scan on live themes. Tier cards show optional tier images, reward and tier sections use smoother carousel behavior, earning rules reveal progressively when there are many actions, and discount buttons use clearer copy when customers redeem or copy a code.

Customer Account Hub

The customer account hub lives inside Shopify New Customer Accounts. It is a single JeriCommerce destination that includes the loyalty experience inside the customer's account area.

The customer account hub requires Shopify New Customer Accounts. If a store still uses Classic Customer Accounts, use the storefront hub as the main loyalty destination until the account experience is upgraded.

Add It to Account Navigation

1

Open menus

From Shopify admin, go to Content > Menus.

2

Select the customer account menu

Open Customer account main menu.

3

Add a menu item

Click Add menu item.

4

Enter the label

Use a label such as "Loyalty", "Rewards", or the merchant's program name.

5

Choose the JeriCommerce app link

In Search or paste link, choose Apps > Loyalty Hub (JeriCommerce).

6

Save

Save the menu, then open a test customer account and confirm the link appears in the account navigation.

Storefront Hub Customization

The default storefront hub is designed to be customized from the Shopify theme editor. This section applies only to the storefront hub, not the customer account hub.

Use the storefront hub block settings for the changes most merchants need:

Setting area What to customize
Content Hero title, subtitle, and text exposed by the block settings.
Sections Show or hide how-it-works content, earning rules, and VIP tiers.
Colors Match the hub to the store's primary, contrast, secondary, text, and muted colors.

Download the Storefront Hub CSS starter, then copy the file contents into the storefront hub Custom CSS field and edit the values to match the theme.

The starter file includes the full storefront hub token reference. Most merchants should start with the public --hub-* variables near the top of the file:

Token group What it controls
--hub-max-width, --hub-page-*, --hub-section-gap Page width, page padding, section rhythm, and anchor offset.
--hub-card-*, --hub-media-radius, --hub-pill-radius, --hub-button-* Card spacing, border width, corner radius, media radius, pills, and buttons.
--hub-hero-* Hero columns, hero height, title width, copy width, and media ratio.
--hub-rewards-columns-*, --hub-earn-columns-* Responsive reward and earning-card grid columns.
--hub-tier-* Tier card, tier comparison, and tier carousel sizing.
--hub-modal-*, --hub-wallet-* Storefront modal dimensions and wallet preview sizing.
--hub-color-* Page, surface, text, border, accent, success, danger, overlay, skeleton, modal, and button colors.
--hub-shadow-* Card, hover, success badge, and modal shadows.
--hub-font-*, --hub-heading-*, --hub-label-* Heading, body, and label font families, weights, transforms, and label color.
--hub-motion-* Shared easing and hover/reveal movement.

For fully custom storefront HTML, CSS, section order, earning rows, or tier cards, use the Custom CDN Templates guide instead of the default hub setup.