The large area in the middle of the builder is a live preview of the page you are editing. The buttons in the top bar change how you see it.
Desktop, Mobile, and Fullscreen
The viewport buttons sit at the start of the top bar:
- Desktop: shows the page as it looks on a computer.
- Mobile: shows the page at phone width. Check it often, since most shoppers use a phone.
- Fullscreen: hides the settings panel so the preview gets the full width. To leave it, click Desktop or Mobile, click a tab in the left sidebar, or select a section with Inspector.
Only the buttons that fit your window are shown. On a small window, Fullscreen or Desktop can disappear, and if only one view fits, the buttons are hidden. Make the window wider to get them back. The builder remembers your view while the browser tab stays open. After a reload, Fullscreen opens as Desktop.
Inspector mode
Inspector is the cursor icon in the top bar. It is on when you open the builder.
- While it is on, moving the mouse over the preview outlines the section or block under it. Clicking selects it and opens its settings in the panel, and its row opens in the Sections tab.
- While it is on, the preview does not react like a real store: links, buttons, and sliders do not work, because your click is used to select.
- Click the icon again to turn it off. Now the preview works like your store, so you can test menus, sliders, the cart drawer, and forms.
The AI assistant can also turn it on or off for you. See AI builder actions.
The Preview button
The Preview button (eye icon, next to Publish) opens the page you are on in your real store, in a new tab.
- It shows the published version. Changes you have not published are only in the builder, so click Publish first. See Publishing your builder changes.
- On the Product, Landing, Collection, and Policy pages, it opens the product, collection, or policy you picked in the builder. It works even if that item is not published yet, but only for you.
- It is hidden on the Checkout and Thanks pages, because those pages need a real cart or order.
- If the preview tab is already open, reload it after you publish to see the new version.
Light or dark builder
Toggle theme (the moon icon) switches the builder itself between light and dark mode. It does not change your store.
On a phone or tablet
On a narrow screen the settings panel sits over the preview. Drag its handle down to see more of the preview, drag it up or tap the handle to bring the settings back.
Before you publish
- Switch to Mobile and scroll the whole page.
- Check that text is easy to read on each background.
- Turn Inspector off and click your buttons and menu links to see where they go.