Page builder basics
Edit any page by adding blocks, changing their settings, previewing on phone and desktop, and publishing. Drafts stay private until you press Publish.
Every page of your website is built from blocks: a heading, a product grid, a slider, a button and so on. The builder is where you add, move and change them. Everything you do is saved as a draft, and buyers see nothing new until you publish.
Before you start#
- Your website exists: Create your website.
- You can design: the owner always can; staff need design edit permission.
- Use a computer or a tablet for the builder. The theme editor needs a screen at least 1024 px wide.
Open the builder#
There are three easy ways in:
- Design in the sidebar, then Open visual editor (or Edit homepage).
- Pages in the sidebar: every page of your website is listed. Open one, or add a new one from Pages you can create.
- On your live website, signed in as the owner, press Edit this page in the slim owner bar at the top.
Edit a page#
- 1
Add a block
In the left sidebar open Blocks. Click a block to add it after the selected one, or drag it onto the page. You can also press Add a block here in an empty area. Use Search blocks if you know the name.
- 2
Select it and change it
Click a block on the page. On the right, its settings open in four tabs: Content, Style, Layout and Advanced. Changes save by themselves.
- 3
Move and organise
Drag blocks up and down on the page, or use Layers to see every block in order.
- 4
Check every screen size
Use the screen size switch for Desktop, Tablet and Mobile. Most buyers use a phone, so look at Mobile.
- 5
Preview, then Publish
Preview opens the draft in a new tab. When it looks right, press Publish. If the button says N to fix, open the list and fix those problems first.
Draft, live and history#
| Chip in the top bar | What it means |
|---|---|
| Draft | The page is not on your storefront yet. Publish to put it live |
| Published | Your storefront shows exactly this |
| Changes not published | Your storefront still shows the last published version |
- The small status next to it shows Saved, Saving... or Unsaved changes.
- Undo and Redo work as you expect (Ctrl+Z, Ctrl+Shift+Z).
- Version history keeps earlier published versions, so you can look back and roll back.
- More > Reset draft to default design throws away your draft and goes back to the default design of that page.
Text version of the diagram
- Edit the draft to Saved automatically
- Saved automatically to Preview on phone and desktop
- Preview on phone and desktop to Anything to fix?
- Anything to fix? to Edit the draft (Yes)
- Anything to fix? to Publish (No)
- Publish to Visitors see it
- Visitors see it to Roll back in Version history
- Roll back in Version history to Edit the draft
Common problems#
I changed something but my website looks the same
The change is still a draft. Press Publish. The chip shows Changes not published until you do.
The Publish button says "N to fix"
The builder found problems that would break the page, for example a missing required setting. Open the list, fix each one, and publish again.
I cannot drop a block in a place
Some blocks only fit in some places. The sidebar tells you why ("It cannot go here", "Only inside a product area"). Try dropping it between sections.
I made a mess
Use Undo, or Version history to go back to a published version, or Reset draft to default design.
Comments (0)
Anyone can comment. Please do not post phone numbers, passwords or customer details.