Match the widget to your store with On-brand
Point On-brand at your storefront and Joy sets the widget's colors, button style, fonts, logo, imagery and copy to match your brand. You review every value before it applies.
Part of the Unified Widget editor. Available on stores running the Unified Widget. On-brand is marked Beta.
Overview
On-brand reads a page of your storefront and maps what it finds onto the Unified Widget. You choose which parts to apply:
- Colors and theme — palette, button style, corner radius, and the fonts your theme uses.
- Logo and images — logo, avatar, and hero image from your storefront.
- Content voice — the widget text, rewritten to match how your brand speaks.
The button is read the way a shopper sees it, hover included. If your theme's button turns transparent on hover, or sweeps a color panel across itself, the widget's buttons do the same.
Nothing reaches your storefront until you click Apply changes and save the widget. Every value stays editable afterwards.
Run a scan
Open the On-brand tab
Go to On-site content → Unified widget and open the On-brand tab. You can also click Try On-brand on the Match the widget to your store banner in the Design panel.
Enter the page to read
Storefront URL starts with your store's address. Your home page works best: On-brand takes the theme from the page you enter, then reads the button style from one of your products.
If your storefront is password-protected, add the Storefront password. It unlocks your own store's domain for this scan only and is never stored.
Choose what to apply
Under Apply to, tick Colors and theme, Logo and images, Content voice, or any combination. Set the Language the rewritten copy is written in.
Click Generate
On-brand names each stage as it runs: opening your storefront, reading colors and fonts, finding a product page, checking the button and its hover, collecting your logo and imagery, working out what your store is about, and rewriting the copy.
Click Stop to cancel. A stopped scan changes nothing.
Review, then apply
Check the detected values and the rewritten labels in the live preview, change anything you want, then click Apply changes. Save the widget to publish.
Review what was detected
Detected design lists six colors. Each one is editable before you apply:
| Color | Where the widget uses it |
|---|---|
| Button and accent color | Buttons, launcher, active footer item |
| Button text | Text on those buttons |
| Widget background | The widget's base background |
| Secondary color | A second brand color from your storefront |
| Body text | Paragraph text |
| Heading text | Headings |
The Detected logo appears next to them.
Brand overview is On-brand's summary of what your store is about. If the rewritten copy misses your voice, edit the overview and click Generate again. The rewritten labels are listed so you can edit any of them before applying.
On-brand remembers your last scan in this browser, so reopening the tab shows the same results without scanning again.
Keep buttons matched to your store
On-brand sets the button style once. To keep it tied to your storefront, use the Button style setting in the Design panel:
- Match store theme — Joy matches a visible primary button on your storefront.
- Joy preset — choose Solid, Outline, or Soft.
- Custom — your own settings.
Notes
- No button found? Some pages have no primary button On-brand can read. When that happens, the button and accent color are skipped and the other colors, logo and imagery still apply. Enter a product page URL to pick up the accent color too.
- Video hero. If your storefront's hero is a video, On-brand uses the video's poster image.
- Copy not rewritten? If On-brand can't work out what your store is about, enter a different URL, such as your home page or an About page.
- Your storefront theme is never changed. On-brand only reads your storefront. It writes to the Joy widget settings in the editor, nothing else.