Skip to content
Product update

The Unified Widget is here. Make your widget be your brand.

Joy's new storefront, rebuilt on Lit Web Components. Theme every detail through CSS design tokens. Request the upgrade through support.

Thomas NguyenThomas Nguyen
The Unified Widget is here. Make your widget be your brand.
2 min read

Summarize this post with AI

Most loyalty widgets land on your store with three problems: they fight your theme, they look the same as everyone else's, and they force you into someone else's idea of "good design."

We rebuilt the entire storefront to fix that.

The Unified Widget is Joy's loyalty experience — floating widget, loyalty page, account page, cart drawer redeem, and points calculator — rebuilt on Lit Web Components. We call it unified because every storefront surface now runs on one codebase, one component library, and one shared design-token system. Every color, font, radius, and spacing value is exposed as a CSS design token. Every screen is composed from 39 modular blocks. The result: a widget that doesn't just sit next to your brand. It becomes your brand.

What "Lego-block architecture" actually means

The Unified Widget ships 39 web components. They compose like Shopify sections — drop in a Hero block, a Ways to Earn block, a VIP Tier block, a Referral block. Reorder them. Hide what you don't need. Theme each block independently.

The loyalty landing page alone is now 10 distinct blocks: Hero, How it Works, Ways to Earn, Ways to Redeem, VIP Tier Benefits, Referral Program, Activity Feed, FAQs, Sign-up Banner, and AI-generated Icons. Build the loyalty page that fits your customer journey, not Joy's default.

Theming via CSS design tokens — no more custom CSS battles

Every visual choice in the Unified Widget routes through a CSS custom property:

  • Colors — primary, secondary, surface, on-surface, accent, with auto-contrast pairs
  • Typography — font family, size scale, weight, letter-spacing
  • Shape — border radius scale (button, card, modal)
  • Spacing — padding and gap scale across all blocks

Set a token once at the root level. Every component picks it up through Shadow DOM cascade. Custom CSS still works — it just no longer has to fight Joy's default styles.

Faster, lighter, safer

  • Smaller bundle on first paint. Components are props-driven and lazy-loaded. The FAB ships in a tiny chunk; everything else loads on open.
  • Zero data risk. The Unified Widget reuses your existing business logic unchanged. Your programs, points, customers, integrations, and Shopify Flows stay untouched. Only the visual layer changes.
  • Roll back any time. Don't love it? Contact support and we'll switch you back to the legacy widget the same way we switched you on. Joy never loads both versions at once.

Built for ambitious brands

If you're building a brand customers obsess over, your loyalty widget is part of your visual identity, not a software accessory bolted onto it. The Unified Widget is for stores that want absolute control over how that identity looks on every storefront surface.

It's also why this is the foundation for what's next: in 2026, the same Lego-block architecture powers the new Showcase Gallery, certified Loyalty Academy templates, and the upcoming MCP Server (so AI tools can build on Joy components directly).

How to get the Unified Widget

New stores — if you installed Joy after the Unified Widget release, you're already on it. Open your loyalty page or storefront widget to see the new design.

Existing stores — request the upgrade through our support team. Your existing branding, programs, points, and customers transfer automatically.

  • In-app: open the support chat from your Joy dashboard
  • Email: [email protected] — subject "Enable Unified Widget"
  • Help center: help.joy.so → contact form

After we enable it, customize the new design in On-site content → Branding → Widget Design using the new design token editor.

Full documentation: Unified Widget guide on help.joy.so

Ambitious brands don't accept ordinary widgets. Now you don't have to.

Thomas Nguyen

Written by

Thomas Nguyen

Thomas Nguyen is the CTO of Joy, a loyalty solution for Shopify and eCommerce brands. With years of experience building high-performance Shopify apps, Thomas aims to help merchants grow through customizable and retention-focused tools.

Stop being ordinary. Start leading

20,000+

Brands run loyalty on Joy

4.9★

Shopify App Store rating

1,689

Merchant reviews