> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md).

# Set up the loyalty page

{% embed url="<https://dollarlabs.neetorecord.com/watch/c8d6c712c04f95c6091c>" %}

\_This article's section starts at 8:16 in the video.\_

The loyalty page is a full storefront page: a dedicated home for your rewards program with a hero, how-it-works steps, ways to earn, tiers, referrals, reward history, and an FAQ. When you're done here, it's live on your store, branded, and in your navigation.

## At a glance

| Touchpoint   | Surface              | What it shows                                                                                                                        | You can customize                                                                                                                                                             |
| ------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Loyalty page | Full storefront page | Hero, how-it-works steps, ways to earn, tiers, referral block with share buttons (Facebook, X, WhatsApp, email), reward history, FAQ | Every section's copy (logged in/out variants), hero image, section hiding, full branding tokens (colors, type, radii), sign-in/registration URLs, custom CSS (`db-loyalty-*`) |

## Prerequisites

* At least one live cashback program, so the page has something to show.
* One of the DollarBack app embeds enabled in your theme; the page needs it to load its data.

## Step 1. Publish the page

The loyalty page is served by DollarBack at a fixed URL on your store: `/apps/dollarlabs/loyalty`. It goes live as soon as either the **Cashback Widget** or the **Cashback Window Variable** app embed is enabled in your theme.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-601723340d97b85e76e4897275a4445d708588e5%2Fdb-theme-editor-app-embeds-annotated.png?alt=media" alt="The Shopify theme editor with the App embeds panel filtered to Cashback, showing the Cashback Widget and Cashback Window Variable embeds switched on, and the storefront preview with a Rewards button in the bottom-right corner."><figcaption><p>Either DollarBack app embed puts the loyalty page live. The Cashback Widget embed also shows the floating launcher.</p></figcaption></figure>

1. Go to **DollarBack admin → Customize → Loyalty page**.
2. If an embed is active, a banner confirms "Loyalty page is live on your storefront" with a link to the page. If you instead see "Theme embed not enabled", use the **Open theme editor** action, enable one of the two embeds, and save.
3. Open `/apps/dollarlabs/loyalty` on your storefront to see the default page.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-167828d6d14207f994fa8b512feb99a7944a15fb%2Fdb-storefront-loyalty-page.png?alt=media" alt="The DollarBack loyalty page on the storefront, showing the hero Join our Rewards Club with Join Now and Sign In buttons above the How it works steps."><figcaption><p>Your loyalty page lives at /apps/dollarlabs/loyalty. Guests see the signed-out hero with the join button.</p></figcaption></figure>

There's no full-page preview inside the admin; use the **View loyalty page** button to check your changes live.

## Step 2. Edit each section

The page is built from a pinned **Hero banner** plus reorderable sections: **How it works**, **Ways to earn**, **Ways to redeem**, **Tiers**, **Referral**, **Reward history**, and **FAQ**. Drag sections to reorder them; each has its own copy fields.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-af8eae62f77354d573c9bb178d3fcba5c8d52170%2Fdb-loyalty-page-editor-annotated.png?alt=media" alt="The Loyalty page editor with the success banner, the Content, Branding &#x26; CSS and Links tabs, the expanded Hero banner fields, and a Preview card that says Full-page preview not available with a View loyalty page button."><figcaption><p>The loyalty page editor lists every section. Drag a row to reorder it, or use its eye icon to hide it.</p></figcaption></figure>

The hero has separate states for guests and signed-in customers:

| Hero field                                                        | Applies to                                                         |
| ----------------------------------------------------------------- | ------------------------------------------------------------------ |
| Heading (logged out) / Subtitle (logged out) / Join CTA           | Guests                                                             |
| Heading (logged in) / Subtitle (logged in) / Shop CTA (logged in) | Signed-in customers (the logged-in heading supports `{firstName}`) |
| Banner image URL / Sign in CTA / Balance label                    | Both states                                                        |

The other sections follow the same pattern: how-it-works steps, earn cards, redeem items, tier thresholds (spend thresholds support `{amount}`), referral share copy (with Facebook, X, WhatsApp, and email share buttons), history labels, and FAQ entries are all editable text.

**Reward history** carries four filters — **All**, **Store credit**, **Discount codes**, and **Referral** — and each label is editable. The Referral filter pulls referral earnings out of the general store-credit list, so a customer can see what their referrals have paid them.

The illustrations on the earn cards, reward cards and tier badge are swappable for your own artwork; see [Icons & images](/dollarback-store-credit/widgets-and-storefront/icons-and-images.md).

### Working with the preview

Click any text in the preview to jump to the field that controls it, rather than hunting through the settings form. The preview can also be switched to a guest view, so you can check the signed-out hero and join CTA without opening a private window.

## Step 3. Hide sections you don't need

Every section has a hide/show control (the hero has its own **Hide hero** toggle). Don't run tiers? Hide the Tiers section; nothing else changes. Hidden sections keep their content, so you can bring them back later.

## Step 4. Brand it

The Branding controls are design tokens applied across the whole page:

| Group      | Controls                                                                                                                   |
| ---------- | -------------------------------------------------------------------------------------------------------------------------- |
| Colors     | Primary color, Primary text color, Secondary color, Page background, Card background, Text color, Muted text, Border color |
| Typography | Heading font size, Heading font weight, Body font size                                                                     |
| Shape      | Border radius (cards), Border radius (buttons & chips)                                                                     |

## Step 5. Custom CSS

For finer control, the **Custom CSS** field targets the page's stable class names (everything is prefixed `db-loyalty-*`), and the page exposes CSS variables including `--db-loyalty-accent` and `--db-loyalty-accent-text`. For example:

```css
.db-loyalty-hero { min-height: 420px; }
:root { --db-loyalty-accent: #0b7a4b; }
```

Inspect the live page to find the class for the element you want to change; the `db-loyalty-` prefix keeps your rules from leaking into the rest of the theme.

## Step 6. Point the sign-in and registration links

In the Links controls, set:

* **Sign in URL**: where the hero's sign-in CTA sends guests (your customer account login).
* **Register URL**: where the join CTA sends new customers.
* **Shop / collections URL**: where the logged-in shop CTA points.

## Step 7. Add it to your navigation

In Shopify admin, go to **Online Store → Navigation**, open your main menu, and add a menu item (for example "Rewards") linking to `/apps/dollarlabs/loyalty`.

## Verify it works

1. Visit the page in a private window: you should see the logged-out hero and join CTA.
2. Sign in as a test customer: the hero should switch to the logged-in state with the balance, and Reward history should show real entries.
3. Confirm the nav item appears and the share buttons open with the customer's referral code.

## Common issues

* The page 404s or renders empty: the app embed is disabled. See [A widget isn't showing on my store](/dollarback-store-credit/troubleshooting-and-faq/widget-isnt-showing.md).
* The Tiers section is empty: tiers aren't configured or synced. See [Loyalty tiers overview](/dollarback-store-credit/loyalty-tiers/loyalty-tiers-overview.md).
* The page shows in the wrong language for a translated storefront: see [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md).

## Related articles

* [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md)
* [The floating cashback widget](/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md)
* [How customers share referral links](/dollarback-store-credit/referral-program/how-customers-share-referral-links.md)
* [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md)