Set up the loyalty page
_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
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.
Go to DollarBack admin → Customization → Loyalty page.
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.
Open
/apps/dollarlabs/loyaltyon 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:
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:
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:
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
Visit the page in a private window: you should see the logged-out hero and join CTA.
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.
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.
The Tiers section is empty: tiers aren't configured or synced. See Loyalty tiers overview.
The page shows in the wrong language for a translated storefront: see Translate your widgets.
Related articles
Last updated