The storefront builder is the visual editor for your online store. You design every page without code and see your changes in a live preview. Nothing reaches shoppers until you click Publish. Open it from Themes with the Customize button, or with the link above.
The builder layout
- Left sidebar: icon tabs. From top to bottom: Markets (country flag), Pages, Sections, Settings (gear), and the AI assistant.
- Settings panel: opens when you select a section or block and shows its settings. Most sections also have a Custom CSS tab.
- Preview: your store as shoppers will see it.
- Top bar: the view buttons, Toggle theme, Inspector, Undo and Redo, Preview, Publish, and Exit builder, which takes you back to Themes.
Pages
The Pages tab switches between the 12 pages you can design. You cannot add pages. See Which store pages can you edit.
Markets
The Markets tab switches market. Each market has its own design for every page and its own global settings, so an edit in one market never changes another. A market's menu has Edit (its language, currency, shipping, and more), the clone options, and the theme preset options. See Clone a page or a whole market and Export and import a theme preset.
Sections and blocks
The Sections tab lists every section on the page. Add and reorder them as explained in Sections and blocks. The menu of each section and block has more actions:
- Copy and paste sections, blocks, and styles
- Duplicate, hide, or delete sections and blocks
- Apply a section to all pages
Global settings like colors and fonts are in the Settings tab. See Builder settings.
Preview, undo, and publish
- Desktop, Mobile, Fullscreen, Inspector, and the Preview button: see Preview modes and Inspector.
- Undo, Redo, and keyboard shortcuts: see Undo, redo, and keyboard shortcuts.
- Publish saves the page and market you are on, so publish each page you change. If a change does not show on your store, see Publishing your builder changes.
Prefer to describe what you want? See Build your store with the AI assistant.