Shopify customer account extensions: loyalty program UI

A merchant running a large ecommerce store wants a loyalty program. Customers should see their points balance, redeem rewards, and track progress toward tiers - all inside their customer account, not as a separate external site.

Three approaches exist. Two fail the "feels native to Shopify" test that determines whether customers actually use it.

What doesn't deliver the native experience

External loyalty site at a separate URL. Customer logs into Shopify account, then clicks through to a different domain for loyalty. Broken authentication flow, context switch, mobile-app-like friction. Customers drop off before completing the round-trip.

Custom Liquid page using Shopify theme pages. Lives under /pages/loyalty, rendered in theme code. Works for simple display but can't execute client-side logic cleanly, can't do authenticated actions (point redemption) without a separate backend, doesn't render inside the customer-account UI.

Email-only updates. Merchant emails monthly "your balance is X" without any in-product surface. Lower engagement. Customers don't check balance proactively.

The pattern that fits: Customer Account UI Extensions

Shopify's Customer Account UI Extensions let apps add pages and components inside the customer-account experience. The extension runs in an isolated frame with access to authenticated customer data and runs as React + Shopify UI extensions components.

Architecture:

• Extension definition in the app's shopify.extension.toml - specifies target (customer-account.page.render, customer-account.order-status.block.render, etc.)
• Extension code in TypeScript/React using @shopify/ui-extensions-react
• Backend the merchant's app for loyalty-point calculations and redemption
• Authentication via the extension context - customer is already authenticated
• Admin configuration (optional) via admin UI extension for merchant to manage loyalty rules

The customer logs into their account, sees a new navigation entry "Loyalty Rewards", clicks in, sees points balance and rewards - all in the native customer-account shell.

Extension target selection

Customer account UI extensions target specific locations:

• customer-account.page.render - adds a new page to the account navigation (the loyalty program home)
• customer-account.order.page.render - adds a section to order detail pages (e.g., "You earned 50 points on this order")
• customer-account.order-status.block.render - adds a block to the order status page (earn points on the order confirmation)

For loyalty, typical setup is:

1. A dedicated loyalty page (new tab in customer account nav)
2. Order-detail blocks showing per-order point earnings
3. Order-status block for post-purchase confirmation

Example extension code

A simple points-balance display:

import {
  reactExtension,
  BlockStack,
  Heading,
  Text,
  Button,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';
import { useState, useEffect } from 'react';

export default reactExtension(
  'customer-account.page.render',
  () => <LoyaltyPage />,
);

function LoyaltyPage() {
  const { i18n, authenticatedAccount } = useApi();
  const [points, setPoints] = useState(0);

  useEffect(() => {
    fetch(`/apps/loyalty/points/${authenticatedAccount.customer.current.id}`)
      .then(r => r.json())
      .then(data => setPoints(data.balance));
  }, [authenticatedAccount]);

  return (
    <BlockStack>
      <Heading>Your Loyalty Balance</Heading>
      <Text>{i18n.formatNumber(points)} points</Text>
      <Button to="/rewards">Browse rewards</Button>
    </BlockStack>
  );
}

The fetch hits the merchant's app API (behind the scenes) to get the customer's balance. Standard Shopify app URL signing authenticates the request.

Data flow

Customer account extensions are thin UI; business logic lives in the app's backend:

1. Customer opens loyalty page
2. Extension renders, fetches balance from merchant app API
3. Customer clicks "Redeem 100 points for $10 off"
4. Extension calls merchant app API to process redemption
5. App validates (customer has enough points, reward is available), creates a discount code, deducts points, returns result
6. Extension shows success state with discount code

The merchant app is the source of truth for points; the extension is the customer-facing surface.

Backend architecture

The app's backend needs:

• Customer-to-points ledger (transactions: earn, redeem, expire)
• Rewards catalog (what can be redeemed for how many points)
• Tier rules (points thresholds, benefits per tier)
• Webhook subscribers to orders/create, orders/updated (earn points on purchase), refunds/create (deduct points on refund)
• API endpoints the extension calls (balance, redeem, history)

Data typically lives in the app's own database, not in Shopify metafields (volume and update frequency exceed what metafields handle well).

Admin-side management

Merchants need admin UI for:

• Configuring earn rules (e.g., 1 point per $1 spent, 2x on promotional products)
• Defining rewards catalog
• Viewing customer balances and adjusting
• Running campaigns (bonus points weekends)

This is an admin UI extension or a full Polaris-based admin interface within the app. Either way, separate from the customer account extension - different audience, different surface.

Third-party loyalty apps

Many merchants use an existing loyalty app (Yotpo Loyalty, Smile.io, LoyaltyLion). These already include customer account UI extensions built into their product.

Custom loyalty makes sense when:

• The business rules don't fit off-the-shelf apps
• The merchant wants full data ownership
• Integration with proprietary systems requires bespoke handling
• The loyalty program is strategic enough to warrant custom investment

For typical DTC merchants, off-the-shelf apps are faster and cheaper. Custom customer account extensions fit enterprise or highly-differentiated loyalty scenarios.

What ships with a custom loyalty extension

A production customer account loyalty implementation has:

• Customer account UI extensions for loyalty page and order blocks
• Merchant app backend handling points, rewards, and customer data
• Webhook subscribers to order lifecycle events
• Admin UI for merchant to configure and monitor
• Customer-facing flows (earn confirmation, redemption flow, expiry notifications)
• Documentation for the merchant's support team to handle customer questions
• Reporting on program effectiveness (engagement, redemption rate, incremental revenue)

The extension brings the experience inside Shopify's native customer account - the difference between a loyalty program that feels like a feature and one that feels like a distraction.