> 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="" %} \_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. 1. Go to **DollarBack admin → Customization → 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. 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. 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. ## 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)