Widget creation wizard
Click “Create widget” on the home page to enter the wizard. Three steps to complete, then enter the editor.
Image: wizard first screen (top step indicator + Step 1 content)
Top navigation
Section titled “Top navigation”- Title: “Create widget”
- “Cancel” / “Back” buttons
- Step indicator: Placement → Template → Color scheme, current step highlighted
Image: top step indicator closeup
Step 1 — Placement
Section titled “Step 1 — Placement”7 same-level cards, each = one mount location. Click the card’s bottom “Pick this position” button to next step.
| Card | Tip |
|---|---|
| Product page | Display below the “Add to cart” button on the product page. |
| Footer | Display in the storefront footer. Two buttons within: “Above footer” / “Below footer”. |
| Floating | Pin at viewport edge. 4 edges within: “Top” / “Bottom” / “Left” / “Right”. |
| Cart Drawer | Display in the cart drawer. |
| Cart Page | Display on the cart page. |
| Custom Position | Embed at any theme location. |
| Product image overlay | Pin a label to product images (PDP main image or collection card image). |
Each card’s right side shows position “Preview”.
Tip: “Specific DOM position is auto-selected by the system based on theme — merchant doesn’t choose.”
Image: Step 1 overall (7-card grid) + single card zoomed in (with SVG preview + Floating’s 4-edge selector)
Step 2 — Template
Section titled “Step 2 — Template”Subtitle: “Pick a template”.
Lists all templates by category, with “Matches this position” at the top (recommended row, with “Recommended” badge).
Template categories:
- Buttons — marketplace / quick links / quick icons / discount
- Badges — Trust ticker / Trust mono stack
- Social — Social row / Social column / Messengers
- Payment — Payment icons / Payment mono / Trust+payment combo
- Labels — Sale / New arrivals / Low stock / Natural
Each card has preview image, name, optional tip. Click “Use this template” to next step.
Image: Step 2 full (recommended row + all template categories)
Step 3 — Color scheme
Section titled “Step 3 — Color scheme”Subtitle: “Pick a color scheme”.
Tip: “Color scheme only changes colors — template’s layout, text, and icons are preserved. Switchable later in editor.”
A 4-column “Color scheme” picker with internal presets and (if theme supports) “From your theme” group.
Built-in 5 presets:
- Plain color — “Light bg + dark text — third-party icons keep brand color.”
- Plain mono — “Pure black & white chrome — third-party icons in mono.”
- Brand front — “White-bg buttons + brand color icon and text. Each row uses the third-party brand’s color.”
- Brand fill — “Each button filled with the brand’s color, white text and white mono icon.”
- Dark teal — “Dark palette with mint-teal accents.”
Card with “Default” badge is the default. Click “Use this scheme” to create the widget and jump to the editor.
Image: Step 3 full (color scheme grid + “Default” badge)
Widget type ↔ template enforcement
Section titled “Widget type ↔ template enforcement”The wizard enforces compatibility at two layers:
- Manifest filter (frontend) — after picking placement, template list auto-filters to compatible presets
- Server validate (backend) — submission re-validates placement × template compatibility
See Widget types for cross-type switching prohibition.