Editor overview

Click a widget card or list row on the home page to enter the editor — the main workspace for a single widget.

Image: editor overall (left tabs + field panel, right live preview canvas)

Overall layout

• Left: 4 tabs + field panel
• Right: live preview canvas
• A draggable splitter in between adjusts column widths

Image: two-column layout with splitter

4 tabs

Tab	Purpose	Details
Content	Edit widget component tree and fields	Content tab
Design	Color scheme (Bundle) / Custom CSS / Delete	Design tab
Display	9-dimension display rules	Display tab
Localization	Multi-language text	Localization tab

Live preview canvas

Render mechanism

The preview canvas is an iframe loading the same widget.js used by the storefront. When merchants edit fields, postMessage pushes config to the iframe; Preact diff-updates inside.

Critical constraint: admin preview = storefront rendering (by construction) — widget.js is a config → DOM pure function; admin and storefront share the same code, so what merchants see in the editor is what ships.

Desktop / mobile toggle (viewMode)

Bottom toolbar’s desktop / mobile toggle buttons:

• Desktop — canvas renders desktop fields (e.g. desktopSize / desktop padding values)
• Mobile — canvas renders mobile fields (mobileSize / mobile padding)

Mechanism:

• viewMode is sent to the iframe via postMessage
• WidgetRenderer uses isMobile context to decide which CSS each component outputs
• Does not depend on iframe actual width (avoiding preview iframe size ≠ real device inconsistency)

Production storefront: real @media (max-width: 768px) query.

Image: live preview canvas + desktop / mobile toggle

Other canvas elements

• “Width” displays current canvas width
• Empty state: “No components — add a component to start editing.”

Top actions

• Back (return to widget list)
• “Undo” / “Redo” (shortcuts Cmd/Ctrl+Z / Cmd/Ctrl+Shift+Z)
• “Publish” (publishing shows “Publishing…”) / “Unpublish” (unpublishing shows “Unpublishing…”)
• “Copy ID” (tooltip: “Open this widget in the theme editor and auto-add it”)
• “Add to theme”
• “Delete” (tooltip: “Cannot be undone.”, confirm “Delete this widget?”)

New widgets default to “My widget” — rename via list row’s “Rename”.

Image: top action bar closeup

SaveBar behavior

Editing any field (including placement switching → SET_PLACEMENT triggered) → top “Save” SaveBar appears, prompting unsaved changes.

• “Save” — commits widget config to D1 + Shopify metafield
• “Discard” — reverts to last saved version (incl. visibility and all other fields)
• Same account publishing / unpublishing in another tab → current editor’s status pill auto-refreshes (BC_MSG broadcast)

Label widget special layout

Label widget (Product image overlay) Content tab is a dedicated panel:

• AnchorPicker (3×3 grid) — pick chip’s position on the product image
• Single LabelChip edit panel (not a component list)
• Display tab has an extra scope segmented (PDP / Cards / Both)

See Quick start (Product image overlay) and Widget types.