What the builder is
The storefront builder is a visual editor that lets you design every page of your store without writing code. Changes preview live in the center of the screen. Nothing reaches shoppers until you click Publish.
The builder layout
The builder has three areas:
- Left sidebar: five tabs stacked as icons down the left edge. From top to bottom they are Markets (country flag), Pages, Sections, Settings (cog), and the AI assistant (Amed) pinned at the very bottom.
- Control panel: opens when you select a section or block, and shows every setting for it.
- Preview pane: a live view of your store exactly as shoppers will see it.
Switching pages and markets
Open the Pages tab to move between the pages you can edit: Home, Product, Landing, Collection, Cart, Checkout, Thanks, Search, Policy, Contact, and 404. For a description of each page see Pages you can edit. Open the Markets tab (the first, flag icon) to switch between your markets. Every market keeps its own template and its own undo history for each page, so edits in one market never touch another.
Preview, viewport, and Inspector
A viewport switch lets you preview at different widths with Fullscreen, Desktop, and Mobile buttons. The switch only shows the options that fit your current window, so on a narrow screen some buttons disappear. The top bar also has a Preview button (eye icon) that opens your live store in a new browser tab, and an Exit builder button.
Inspector mode is on by default (the cursor icon in the top bar is highlighted). While it is on, clicking any element in the preview instantly selects that section or block and opens it in the control panel, which is the fastest way to jump to something without scrolling the sidebar. Click the Inspector button to turn it off.
Adding a section
- Open the Sections tab for the current page.
- Click the Add section button (plus-circle icon) in the list, or open a section's menu and choose Add section before or Add section after.
- A picker opens listing every section type you can still add on this page. Click one to add it.
Each section type has a per-page maximum. Once a type reaches its limit it drops out of the picker, and when a slot is full the Add section button is disabled with a tooltip that the maximum has been reached. Section types are also page-specific (for example a hero or newsletter is Home only). The full catalog of types and their limits is in Sections and blocks.
Adding a block inside a section
Select a section, then in its control panel click Add block. Blocks are the pieces inside a section: text, images, buttons, layout groups, dividers, and more. Which block types are available, and how many of each you can add, varies by section.
The section menu (copy, duplicate, and more)
To reach a section's full set of actions, select it and click the menu icon at the top of the control panel, or right-click the section in the sidebar. The menu contains:
- Copy: copies the whole section (content and style).
- Copy style only: copies just the visual styling.
- Paste: pastes a copied section. The hint shows where it will land (After, Inside, or Override). It is disabled with a reason when nothing is copied, the limit is reached, or the type is not allowed in that spot.
- Paste style only: applies copied styling to the selected section. Disabled on a type mismatch or when nothing is copied.
- Duplicate: drops a copy directly below the original, on the current page only. Disabled when the section's per-page limit is reached.
- Hide / Show: toggles visibility. Hidden sections stay in your template but are not shown to shoppers.
- Delete: removes the section. Undo brings it back.
Sidebar rows also carry an eye icon (Hide/Show) and a trash icon (Delete) directly. Required sections cannot be hidden or deleted, so Product info on the Product page and Landing info on the Landing page have no trash icon.
Reordering sections and blocks
In the Sections list, drag a section row up or down to change its place on the page. The preview updates immediately. Blocks reorder the same way by dragging inside the control panel.
Apply a section to all pages
Header, Footer, Announcement bar, and Custom code appear on every page. To push one edited copy everywhere, open that section's menu and choose Apply to all pages. This overwrites the matching section on every page of the current market that already includes it (pages without it are skipped). It is written straight to your live store, so it is irreversible. The builder asks you to confirm first. The AI assistant can run this for you too, covered in AI builder actions.
Undo, redo, and saving
The top bar has Undo and Redo buttons. History is scoped per market and per page, so undoing on Home does not affect the Product page. Keyboard shortcuts: Cmd/Ctrl + Z to undo, Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y to redo, and Cmd/Ctrl + S to publish.
Click Publish (top-right) to push your changes live. The button is disabled when there are no unsaved changes. Publishing is per market and per page, so publishing Home does not publish the Product page.
What to check before publishing
- Switch to Mobile view and scroll the whole page, since most shoppers are on mobile.
- Check text contrast against each section's background color.
- Make sure every image block has a media file selected, because empty image placeholders show as blank space on the live store.
- Confirm that buttons and menu items link to the correct destinations.
To let the AI assistant build and edit sections for you, see Building with the AI assistant.