What the builder is
The storefront builder is a visual editor that lets you design every page of your store without writing any code. Changes you make are previewed live on the right side of the screen. Nothing becomes visible to shoppers until you click Publish.
The builder layout
The builder is divided into three areas:
- Left sidebar: tabs for switching between markets, pages, sections, and global settings. The AI assistant lives at the bottom of the sidebar.
- Control panel: appears when you select a section or block, showing all of its settings.
- Preview pane: a live view of your store exactly as shoppers will see it.
Switching between pages and markets
Use the Pages tab (pages icon) in the left sidebar to switch between the pages you can edit (Home, Product, Cart, and so on). Use the first tab (country flag icon) to switch between your active markets. Each market-and-page combination has its own template and its own undo history.
Previewing on different devices
The top bar contains viewport toggle buttons: Mobile, Desktop, Fullscreen, and an expand icon that opens an isolated preview window. Use these to check how your store looks on different screen sizes before publishing.
Adding a section
- In the left sidebar, find the Sections list for the current page.
- Click the + Add section button that appears between sections, or open the three-dot menu on an existing section and choose Add before or Add after.
- A picker opens showing all available section types for the current page. Click a section type to add it.
Tip: Each section type has a maximum number of instances per page. When you reach the limit, the add button shows the count and a tooltip explaining that the maximum has been reached.
Adding a block inside a section
Select a section, then inside its control panel click + Add block. Blocks are the building pieces inside a section: text, images, buttons, layout groups, dividers, and more. The types of blocks available, and how many you can add, vary by section.
Reordering sections and blocks
In the sections list, drag any section row up or down to change its position on the page. The preview updates immediately. Blocks inside a section can be reordered the same way inside the control panel.
Hiding and deleting sections
Each section row in the sidebar has an eye icon to toggle visibility and a trash icon to delete it permanently. The three-dot menu (⋯) also exposes Hide/Show and Delete. Hidden sections stay in your template but are not shown to shoppers.
Duplicating a section
Open the three-dot menu on the section's row in the left sidebar and click Duplicate. A copy appears immediately below the original on the current page only.
Copying a section's content or style to another section
Open the three-dot menu on the source section and click Copy. Then open the three-dot menu on the destination section and click Paste to replace all content and styling, or Paste style only to copy only the visual styling without touching the content.
Applying a top-level section to all pages
The Header, Footer, and Announcement Bar appear on every page. If you edit the header on the Home page and want every other page to use the same version, open the three-dot menu on the header section and choose Apply to all pages. This overwrites that section on every other page, so the action cannot be undone. Make sure you are happy with the result first.
Inspector mode
Click the Inspector button (cursor icon) in the top bar to turn on Inspector mode. When active, clicking any element in the live preview immediately highlights and opens that section or block in the control panel. This is the fastest way to jump to a specific section without scrolling through the sidebar. Click the Inspector button again to turn it off.
Undo and redo
The top bar contains Undo (return-arrow icon) and Redo buttons. Undo and redo history is scoped per market and page, so undoing on the Home page does not affect changes you made on the Product page.
Saving and publishing
Click the Publish button (top-right of the bar) to push your current changes live. The button is disabled when there are no unsaved changes. Publishing is per market and per page, so publishing the Home page does not automatically publish changes to the Product page.
What to check before publishing
- Switch to Mobile view and scroll through the entire page, since most shoppers are on mobile.
- Check text contrast against the background color of each section.
- Make sure every image block has a media file selected, because empty image placeholders appear as blank space on the live store.
- Confirm that links in buttons and menus point to the correct destinations.