---
title: "Your loyalty widget now takes its look from your storefront"
slug: "on-brand-match-widget-to-your-store"
url: "https://joy.so/updates/on-brand-match-widget-to-your-store/"
kind: "update"
author: "Thomas Nguyen"
author_url: "https://joy.so/author/thomas/"
published_at: "2026-09-14T03:01:52.000+00:00"
updated_at: "2026-10-08T08:57:56.000+00:00"
description: "Joy now reads your storefront and matches the widget to it — colors, button style, fonts, logo and copy. You review every value before it applies."
category: "Product Updates"
tags: ["Product Updates"]
reading_time: 2
feature_image: "https://cdn-web.joy.so/cdn/image/2026/09/Your-loyalty-widget-now-takes-its-look-from-your-storefront-b963a6.png"
---

# Your loyalty widget now takes its look from your storefront

## Why this matters

On-brand reads a page of your storefront and maps what it finds onto the Unified Widget. You choose which parts to apply, and nothing reaches your storefront until you save the widget.

### Match your theme's colors and buttons

Colors and theme sets the widget's palette, button style, corner radius and fonts. The button is read with its hover state, so the widget's buttons behave like your product page buttons.

### Rewrite widget copy in your voice

On-brand writes a Brand overview of your store and rewrites the widget's labels from it, in the language you pick. If the copy misses, edit the overview and click Generate again.

### Re-match the widget after a theme change

Run the scan again on the new theme instead of picking each color by hand. Detected colors stay editable before anything applies.

> **Try this**
> Open the On-brand tab and enter your home page. Before you apply, hover over the button in the preview and compare it with the Add to cart button on a product page.

---

## How to access and use

### Step 1: Open the On-brand tab

In Joy, go to **On-site content → Unified widget** and open the **On-brand** tab.

### Step 2: Enter your storefront page

Enter your **Storefront URL**, ideally your home page. If the storefront is password-protected, add the **Storefront password**.

### Step 3: Choose what to apply

Under **Apply to**, tick the groups you want, set the **Language**, and click **Generate**.

### Step 4: Review and apply

Adjust any detected color or rewritten label in the live preview, click **Apply changes**, and save the widget to publish.

## Setup guides

[Unified Widget — New Storefront UI](https://help.joy.so/on-site-content/branding/widget-v4/on-brand/)

## Good to know

On-brand is marked Beta and runs on stores using the Unified Widget. On a page with no primary button it can read, On-brand skips the button and accent color, and entering a product page URL picks the accent color up.

## Frequently asked questions

### Does On-brand change my Shopify theme?

No. On-brand only reads your storefront, so your theme is never changed.

### Is my storefront password saved?

No. The password works only on your own store's domain, unlocks it for that scan only, and is never stored.

### Can On-brand scan a headless storefront?

Yes. The **Storefront URL** can be any public page, including a headless storefront or a page on a subdomain.