Joy x Weaverse

Joy x Weaverse

Build your loyalty page visually in Weaverse Studio with the Joy Loyalty Page block, and add the Joy loyalty widget to your Weaverse storefront — all powered by the programs you manage in Joy admin.

Headless storefronts are available on the Ultimate plan.

Overview

If your store is built with Weaverse, Joy's theme app extensions can't reach your storefront. The @joy-loyalty/weaverse-hydrogen package adds Joy to Weaverse Studio, so you can drag your loyalty experience onto any page without writing page code. You keep managing programs, rewards, VIP tiers, translations and branding from Joy admin.

With Joy x Weaverse you get:

  • The Joy — Loyalty Page block — drop your whole Loyalty Page V2, or a single section of it (hero, ways to earn, VIP tiers, referrals, FAQ and more), onto any Weaverse page.
  • The loyalty widget — the floating launcher and panel on every page, with points, tier, ways to earn and rewards. Redeemed coupons apply to the cart automatically.
  • Signed-in customer data — customers who log in through the Customer Account API see their own balance and rewards, securely.
  • Server rendering — the block loads its data on the server, so it shows on the first page load.

The packages

PackageWhat it is for
@joy-loyalty/weaverse-hydrogenThe Joy blocks for Weaverse Studio.
@joy-loyalty/hydrogenThe widget, the token route and server helpers the blocks build on. Every Weaverse install needs it too.

Before you start

  1. Make sure your store is on the Ultimate plan.
  2. In Joy admin, go to Settings > Developers and turn on Enable Custom Storefront development.
  3. Set up Customer Account API login in your Weaverse storefront. Without it, every shopper is treated as a guest.
  4. Switch to Loyalty Page V2 in Joy admin — the Loyalty Page block needs it.

Choose your path

  • With an AI coding agent (recommended) — your agent follows our step-by-step skill, adapts the code to your Weaverse project and verifies it with you. You only handle secrets and the deploy.
  • Manually — install the packages, register the blocks and wire them to your cart yourself.

Install with an AI agent (recommended)

Install manually

Loyalty Page block

Troubleshooting

Using plain Hydrogen without Weaverse? Follow Joy on Hydrogen instead.