Loyalty Page block
Build your loyalty page visually in Weaverse Studio with the Joy — Loyalty Page block — the whole page or one section at a time.
The block requires Loyalty Page V2 and a finished install — see Install manually or Install with an AI agent.
Overview
The Joy — Loyalty Page block renders the Loyalty Page you designed in Joy admin. Drag it onto any Weaverse page to show the whole page, or add it several times with a different section each time and mix it with your own Weaverse sections. Content and design stay in Joy admin; the block loads its own data, so you don't need a separate route.
Build the page in Weaverse Studio
- Open Weaverse Studio and go to the page you want — for example a new Rewards page.
- Add the Joy — Loyalty Page block.
- In Content, choose All sections to show the full Loyalty Page, or pick one section.
- Publish.
- Point the widget's
loyaltyPageUrlat this page (default/pages/rewards) so View rewards opens it.
Sections
The Content setting is either All sections or one of: Hero banner, Sign-up banner, How it works, Ways to earn, Ways to redeem, VIP tiers, Referral program, FAQs, Rewards redemption, My rewards, Rewards activity, Loyalty dashboard, Referral management, Loyalty pass wallet or Link accounts.
Upgrading from an earlier version? Version 0.2.0 replaced the older section blocks (for example joy-vip-tiers and joy-ways-to-earn) with the single Loyalty Page block. Pages that used the old blocks stop rendering them — add the Loyalty Page block back and pick the section you need.
Optional: in-page launcher block
The package also exports a Joy — Loyalty Launcher block (JoyLoyaltyWidget). It isn't in joyComponents; register it yourself only if you want a launcher you place per page in Studio:
import {joyComponents, JoyLoyaltyWidget} from '@joy-loyalty/weaverse-hydrogen';
export const components: HydrogenComponent[] = [...existing, ...joyComponents, JoyLoyaltyWidget];Most stores use <JoyWidget/> in the root layout instead. Don't use both, or customers see two launchers.