---
title: "The Unified Widget is here. Make your widget be your brand."
slug: "widget-v4-storefront"
url: "https://joy.so/updates/widget-v4-storefront/"
kind: "update"
author: "Thomas Nguyen"
author_url: "https://joy.so/author/thomas/"
published_at: "2026-05-11T09:08:19.000+00:00"
updated_at: "2026-08-17T09:45:38.000+00:00"
description: "Joy's new storefront, rebuilt on Lit Web Components. Theme every detail through CSS design tokens. Request the upgrade through support."
category: "Product Updates"
tags: ["Product Updates"]
reading_time: 2
feature_image: "https://cdn-web.joy.so/cdn/image/2026/05/Frame-2121453960-1af7d6.png"
---

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

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).

> **Video:** [Joy Loyalty Unified Widget — Your Loyalty Program, Your Way](https://www.youtube.com/watch?v=ggNwQ01m26c)

## 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: [support@joy.so](mailto:support@joy.so) — subject "Enable Unified Widget"
- Help center: [help.joy.so](https://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](https://help.joy.so/on-site-content/branding/widget-v4)

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