Apply theme colors to widgets
Make widget visuals consistent with the shop’s theme: derive a color bundle from the published theme as an additional color scheme option.
Tip: “Theme color derivation requires OS 2.0 themes.”
Full concept: Theme-derived Bundle.
1. Open Design tab
Section titled “1. Open Design tab”Open widget editor → Design tab → “Color scheme” card.
2. Find “From your theme” group
Section titled “2. Find “From your theme” group”In the color scheme modal, the “From your theme” group appears below.
Derived bundle naming: “Theme {n}” or “{themeName} theme {n}”.
Image: “From your theme” section + multiple derived bundle cards
3. Apply
Section titled “3. Apply”Click bundle card → projected onto current widget’s flat fields (fill / iconStyle etc.).
4. When derivation fails
Section titled “4. When derivation fails”If “From your theme” group doesn’t appear, possible reasons:
| Failure reason | Action |
|---|---|
| Theme isn’t OS 2.0 (e.g. Vintage themes like Brooklyn) | Use one of 5 internal presets (see Design tab) |
settings_data.json doesn’t conform to OS 2.0 schema | Contact theme author to fix, or switch theme |
| Theme color tokens incomplete (missing one of 8 required tokens) | Same as above |
Empty state: “No theme color detected — pick from curated schemes below.”
See Theme-derived Bundle - Three support detection gates.
Image: derivation failure empty state
What happens when switching themes?
Section titled “What happens when switching themes?”Existing widgets are unaffected. color + icon are snapshot — locked at creation time, theme changes don’t affect them.
After switching themes, reopening the editor:
- Wizard / Design tab will derive the new theme’s bundles for “switching”
- But this is an explicit choice, not an automatic overwrite
- typography follows new theme (CSS inherit), shape follows template default
See Theme-derived Bundle - per-axis snapshot contract.
Internal presets vs theme-derived
Section titled “Internal presets vs theme-derived”| Source | When to use |
|---|---|
| 5 internal presets (Plain color / Plain mono / Brand front / Brand fill / Dark teal) | Want pre-designed mature schemes, or theme doesn’t support derivation |
| Theme-derived | Want widgets to fuse with native theme, not introduce new colors |
Different widgets can use different scheme sources; one widget can only have one active bundle at a time.
Brand color binding priority
Section titled “Brand color binding priority”Some components (like brand icons) have built-in brand colors (Amazon orange, Instagram pink, etc.). Bundle projection doesn’t override these brand color fields — they’re core to brand recognition, preserved at component-level fields.
If a merchant wants brand icons to follow the bundle color, set the brand icon variant to Mono.