Design tab
The “Design” tab (i18n key tab.design) controls the widget’s overall visual style and advanced operations.
Image: Design tab overall
Color scheme (Bundle switching)
Section titled “Color scheme (Bundle switching)”What merchants see as a “color scheme” is internally a Bundle — a multi-axis token package. See Multi-axis Token Bundle.
- Card title: “Color scheme”
- Current scheme name (custom shows “Custom”)
- “Switch scheme” / “Pick scheme” button → opens modal:
- Title: “Color scheme”
- Top banner: “Switching applies the selected scheme’s colors and shapes to the widget; text, layout, and items are preserved.”
- Color grid (5 internal presets): Plain color / Plain mono / Brand front / Brand fill / Dark teal
- Current scheme marked “Current”, after applying shows “Applied”
Switch behavior:
- bundle → projected onto widget config’s flat fields (
fill/iconStyle/ etc.) - Merchant-overridden fields are snapshot-locked, not overwritten
- Text / layout / items never change
Image: “Color scheme” card + switch modal
From your theme (Theme import)
Section titled “From your theme (Theme import)”Theme-derived bundle section.
- Section title: “From your theme”
- Empty state: “No theme color detected — pick from curated schemes below.”
- Bundle card name format: “Theme {n}” or “{themeName} theme {n}”
- Tip: “Theme color derivation requires OS 2.0 themes.”
Derivation flow, snapshot contract, Vintage exclusion etc. see Theme-derived Bundle.
Advanced CSS (Pro, collapsible)
Section titled “Advanced CSS (Pro, collapsible)”- Card title: “Advanced CSS” + Pro badge
- Top description: “Add custom CSS for this widget and other page elements.”
- Multi-line CSS input, label “Custom CSS”
Placeholder switches by widget type
Section titled “Placeholder switches by widget type”CSS placeholder text auto-switches based on widget type (commit e8be266), making it easy for merchants to copy examples:
| Widget type | placeholder |
|---|---|
| complex | .widget-root { /* your styles */ } |
| floating | .widget-root.floating-top { /* ... */ } |
| label | .widget-label-chip { /* ... */ } |
Hint area shows extended selector examples (hover state, sub-component level, page-specific level, etc.).
Non-Pro users see the locked state with upgrade prompt.
Image: “Advanced CSS” card (collapsed + expanded + locked)
Delete
Section titled “Delete”- Card title: “Delete”
- Tip: “Cannot be undone.”
- “Delete” button (destructive style) → confirm “Delete this widget?”
Image: “Delete” card + confirmation modal
Related docs
Section titled “Related docs”- Bundle architecture and evolution rules → Multi-axis Token Bundle
- Theme derivation flow → Theme-derived Bundle
- Merchant operation flow → Import theme colors