Rewards page & storefront bar
What your customers see, and how to make it yours.
The Rewards page
A block for your theme that you put on a page of your own. It works on every store, whichever kind of customer accounts you use. It shows:
- The customer's tier and the date they joined, or an invitation to join if they're not a member yet.
- What they've spent this year, a progress bar, and how much more they need for the next tier.
- The benefits you list.
- Their unused reward codes, each with its value, expiry and a Copy button.
- A "How it works" panel showing every tier and what it takes to reach it.
Signed-out visitors see a sign-in button that brings them straight back to the page. The block reads straight from Shopify, so it loads fast and keeps working even if TierWise itself is briefly unavailable.
Placing the page
The quickest way is the app's Setup page: three buttons create the page with its own layout, open the theme editor with the block already placed, and add the menu link. See Getting started. To do it by hand instead:
- Make a page. Online Store → Pages → Add page. Call it "Rewards" and save.
- Give it its own template. Online Store → Themes → the three dots on your live theme → Edit code → Templates → Add a new template → type "page", format JSON, name "rewards" → Done. Then in Pages, open Rewards, set Theme template to "rewards", save. Without this the block would appear on every page that shares the default template.
- Add the block. Online Store → Themes → Edit theme, open the Rewards page, Add section → Apps → Rewards page. Save.
- Share the link. The page is live at
/pages/rewardson your store as soon as it's saved. Link to it from your main menu (Content → Menus), your account page, an email, or anywhere else.
Make it yours
In the theme editor, on the block:
| Setting | What it changes |
|---|---|
| Wording | The heading for people who haven't joined, and the "How it works" heading and text. The page title is your page's own title, set in Online Store → Pages. |
| Benefits | Up to six cards, each with an icon (gift, delivery, support, star, discount, and more), a title and a line of text. Leave a title empty to hide that card. Three across on desktop, one column on phones. |
| Accent colour | The card, progress bar and buttons. Empty by default, which uses your theme's main colour. |
| Width | Narrow and centred, or the full width of the page. |
| Show "How it works" | Turn the panel on or off. |
Tier names and thresholds come from the app's Settings and appear on the page as soon as you save them. Everything else about the page is set on the block itself.
The storefront bar
A slim bar on your online store that tells signed-in members they have codes waiting: "You have 2 reward codes available · View rewards". It only appears for customers who hold at least one unused code, and they can dismiss it. It comes back when their codes change.
Turning it on
From the app's Setup page, click Set up next to the storefront bar. Your theme editor opens with the bar switched on under App embeds. Click Save. You can also find it any time in Online Store → Themes → Edit theme → App embeds.
Settings
| Setting | Options |
|---|---|
| Position | Bottom or top of the screen. |
| Link text | "View rewards" unless you change it. |
| Background and text colours | Match your brand. |
| Text size | 12 to 24 pixels. |