Rewards Journey
Show membership customers a visual progress timeline across active recharge punch-card rules in the customer portal
Give members a visual map of how many recharges they've completed and which rewards are coming next. The Rewards Journey block pulls live data from your active Membership Recharge Punch Card rules and renders a progress timeline directly in the customer portal.
This block only renders for stores that have at least one active Membership Recharge Punch Card rule. If no rules exist (or all are paused), the block silently hides itself — even when added in the editor.
What Customers See
Milestone Timeline
Each rule is rendered as a numbered circle on a connected track. Completed milestones get a checkmark, the next one is highlighted, future ones are muted.
Unlocked Pill
A trophy badge in the header that counts how many rewards the customer has already earned.
Next Reward Callout
A highlighted card that names the upcoming reward and the date it will unlock (the membership's next billing date).
Auto-Hide When Empty
The whole section hides automatically if the customer has no active rules to progress through.
How It Works
The block reads the customer's progress across every active Membership Recharge Punch Card rule on the shop:
| Element | Source |
|---|---|
| Milestone count | Each active punch-card rule = one milestone circle |
| Order on the track | Sorted ascending by the rule's required recharge count |
| Completed state | Set when the rule has a completion record for the customer |
| Next milestone | First non-completed rule in sorted order |
| Recharges in header subtitle | Pulled from the lowest-threshold rule's actual completion value |
| Track fill | Stops midway between the last completed and the next milestone |
The block lives inside the Membership tab of the customer portal. Customers without an active membership won't see it.
Adding the Block
Open the Portal Editor
Go to Subscribfy → Customizations → Customer Portal → Edit page. Switch the left sidebar to the Sections tab.
Insert Rewards Journey
In the Main Content column, click Add Block and pick Rewards Journey. The block ships pre-populated with its four child blocks: Header, Pill, Timeline, and Next Reward.
The child blocks (Header, Pill, Timeline, Next Reward) cannot be reordered, but each one can be deleted or disabled individually if you want a slimmer card.
Preview with a Member
Use the customer selector in the preview to load a customer with an active membership. You'll see the milestones populate from your live punch-card rules.
Save or Publish
- Save keeps the change as a draft
- Publish makes it live for every member
Block Structure
The Rewards Journey is a parent block with four children. Each child has its own settings.
| Block | Purpose | Can delete? | Can disable? |
|---|---|---|---|
| Rewards Journey (parent) | Container, pulls customer progress data | Yes | Yes |
| Header | Heading + subtitle area on the top-left | Yes | Yes |
| Rewards pill | Trophy badge with unlocked-rewards count, top-right | Yes | Yes |
| Timeline | Horizontal track with milestone circles | Yes | Yes |
| Next Reward | Highlighted callout at the bottom | Yes | Yes |
Settings Reference
Each child block exposes its own text fields. Variables in {{double-braces}} are replaced at render time with live customer data.
The Header heading child block sits inside the Header slot and renders the title plus a subtitle line.
| Field | Default | Variables |
|---|---|---|
| Heading | Rewards Journey | — |
| Subtitle | You're on month {{recharges}} of your journey | {{recharges}} — the customer's completed membership recharges |
The Header slot also accepts custom Heading, Text, Custom HTML, or Raw Liquid children if you want to swap or extend the default heading.
The trophy badge in the top-right corner.
| Field | Default | Variables |
|---|---|---|
| Pill text | {{count}} Rewards Unlocked | {{count}} — number of milestones the customer has already completed |
The pill renders as a rounded, primary-tinted badge with a small trophy icon.
The Timeline is the row of milestone circles. Each circle inherits its label from the Milestone template.
| Field | Default | Variables |
|---|---|---|
| Milestone label | Month {{charge_count}} | {{charge_count}} — the rule's required recharge count |
Below the label, the block automatically renders the reward's name (falling back to the reward's summary text if no name is set on the rule).
Visual states:
| State | Appearance |
|---|---|
| Completed | Filled circle with a checkmark |
| Next | Outlined circle in the primary color (this is what the customer is working toward) |
| Future | Muted outline |
The connecting track behind the circles fills from left to right and stops centered between the last completed milestone and the next one.
A highlighted callout that previews the immediate next reward. Hidden automatically when the customer has already unlocked every milestone.
| Field | Default | Variables |
|---|---|---|
| Next reward heading | Next reward: {{name}} | {{name}} — the next milestone's rule name{{reward}} — the reward's summary text |
| Next reward body | Next charge on {{date}} | {{date}} — the membership's next billing date |
| Learn More button label | Learn More | — |
| Learn More URL | empty | — |
Leave Learn More URL empty to hide the button entirely. Set it to point at a custom rewards FAQ or a benefits page to give customers more context.
Behavior Rules
Troubleshooting
Related
Customer Portal
The full visual editor for the customer portal — colors, layout, and section blocks.
Membership Punch Card
The earning rule that powers each Rewards Journey milestone.
Loyalty Program
Overview of the full loyalty program: rules, rewards, tiers, and analytics.
Was this page helpful?