The designer
How the visual designer is laid out, and the one rule that makes it safe to experiment.
Design in the sidebar opens the visual designer. It builds your storefront out of blocks — a header, a hero, product grids, text sections, a footer — which you add, replace, reorder and style without writing anything.
The one rule worth knowing first
The designer edits a draft. Your live shop does not change until you press Publish.
That means you can rebuild your landing page in the middle of a working day, try five hero variants, undo a week of work through Version History, and nobody visiting your shop sees any of it.
The layout
The block list, on the left
Every block of the current page, in order. The double-chevron in its header collapses it to a narrow rail that keeps the block count and the add-block button — useful on a small laptop screen. The state is remembered per browser.
Half-width blocks are marked ½. Blocks switched off — a product reviews block while reviews are off — are marked as such and stay reorderable.
The page dropdown, top-left
Switches pages, and opens Manage pages… to add, rename, reorder (drag and drop) or delete pages. See Pages and navigation.
Three width buttons
Desktop, tablet, phone — showing the preview at full width, 768 px or 390 px. This is your storefront's own responsive layout at that width, centred on the canvas. The phone preview also has a phone's height, 850 px (less on a small screen), and sits in the middle of the canvas, so a section that fills the screen shows exactly what a phone shows. Edit Mode works at every width.
The switch is offered from laptop width up, always starts on desktop when the designer opens, and changes nothing in the shop itself.
The toolbar
Edit Mode (pencil) for inline text and image editing, AI Assistant, Theme, a clock icon for Version History, Preview, and Publish. Once you have published, a green Online button appears at the end.
On a phone
The block list is hidden below tablet width, because reordering blocks needs a mouse. A phone offers the preview, the AI assistant and Publish — enough to approve or publish something, not enough to rebuild a page. Moving a block needs a tablet or a computer.
Where to go next
Working with blocks
Add, move, replace and delete — and the rules about where a block may land.
Edit mode
Text, images, colours and the Style tab.
Pages and navigation
Custom pages, reordering, and what happens to links when a page goes.
Theme
Brand colours, fonts, card design, dark shops and background effects.
Images and videos
The asset picker, stock search and AI generation.
The AI assistant
Generating a block, a page or the whole shop.
Preview and publish
How the draft reaches visitors, version history, taking the shop offline.