The page editor
What this section does
Section titled “What this section does”The editor is where you compose a page. It has three working areas: a left panel for structure and content sources, a canvas in the middle, and an inspector on the right for whatever you have selected.
The top bar
Section titled “The top bar”| Control | What it does |
|---|---|
| Page title and status badge | Shows whether the page is Draft, Published, or Archived |
| Desktop / Tablet / Mobile | Switches the canvas preview between screen sizes |
| Zoom − / + | Zooms the canvas between 50% and 150% |
| Save status | Shows whether your latest changes are saved |
| Undo / Redo | Steps back and forward through your edits |
| Copy / Paste / Duplicate / Delete | Acts on the currently selected section or component |
| Bulk mode | Selects multiple items at once |
| Quick actions | Opens a searchable command list |
| Save | Saves the current version |
| Publish | Makes the current version live |
The left panel
Section titled “The left panel”- Page content — the outline of your page: sections and the components inside them. Use it to select, reorder, and understand structure at a glance.
- Components — the library of components you can add. See Component library.
- Saved sections — sections you have previously saved for reuse. Select Insert to drop one into the page.
- History — named snapshots and a timeline of recent versions.
- Global settings — a reminder that theme-level settings such as your header, footer, and global theme controls are managed in the Shopify theme editor, not in Bran.
- Add section — adds a new empty section to the page.
Sections and components
Section titled “Sections and components”A page is built from sections. Each section holds one or more components.
To build a layout:
- Select Add section.
- With the section selected, add a component to it from the Components panel.
- Repeat until the page structure is right.
- Reorder sections and components by dragging them, or from the Page content outline.
Each section has its own quick actions for adding a component, duplicating the section, saving it for reuse, and deleting it.
Note: Your theme header and footer appear at the top and bottom of the canvas as locked previews. They are part of your theme, so they are shown for context but edited in the Shopify theme editor.
The inspector
Section titled “The inspector”Select a section or component and the inspector opens on the right with three tabs.
Content
Section titled “Content”The settings that change what the component says and shows — headings, body copy, buttons, images, and the products, collections, or blog posts it pulls in.
Visual settings for the selected item. The Style tab has two extra switches:
- Styling breakpoint — Desktop, Tablet, or Mobile. Style values you set apply to the breakpoint you are on, so you can, for example, reduce padding on mobile only.
- Style state — Default, Hover, or Active. Use it to style how an element looks when a visitor hovers or interacts with it.
Components inherit your Design System by default. Only change values here when a specific component needs to differ.
Advanced
Section titled “Advanced”Less common settings for the component, including layout and visibility options such as showing or hiding an element on desktop or mobile.
Version history
Section titled “Version history”Open History in the left panel.
- Named snapshots — type a label and select Save snapshot to create a checkpoint you can return to. Useful before risky edits.
- Timeline — a list of recent saved states with their version number and time. Select Restore on any entry to roll the page content back to it.
Restoring changes the page content only. The page’s identity — its title, type, and storefront link — stays the same.
Note: Each page keeps its 10 most recent versions. For longer-term safety, use Backups.
Keyboard shortcuts
Section titled “Keyboard shortcuts”When focus is in the editor:
| Shortcut | Action |
|---|---|
Cmd/Ctrl + C / V |
Copy and paste the selection |
Shift + Cmd/Ctrl + D |
Duplicate the selection |
Delete |
Delete the selection |
Cmd/Ctrl + S |
Save |
Cmd/Ctrl + Z |
Undo |
Shift + Cmd/Ctrl + Z |
Redo |
Cmd/Ctrl + Shift + P |
Open quick actions |
- Build the page structure first with placeholder copy, then fill in the real content. It is much faster than perfecting each section as you go.
- Check the Mobile view early. Most layout surprises show up there, not on desktop.
- Save a named snapshot before you restructure a page that is already live.
- If a component looks wrong across your whole page, fix it in the Design System rather than in each component.
My changes are not showing on the storefront.
Section titled “My changes are not showing on the storefront.”Saving and publishing are separate steps. Select Publish to push your saved version live. See Publish to your store.
Can I undo after I close the editor?
Section titled “Can I undo after I close the editor?”Undo covers your current editing session. To go further back, restore a version from History.
Why can I not edit the header or footer?
Section titled “Why can I not edit the header or footer?”They belong to your theme. Edit them in Online Store → Themes → Customize in Shopify admin.
Can I paste a section into another page?
Section titled “Can I paste a section into another page?”Save the section from its section actions, then open the other page and insert it from the Saved sections panel.
Related guides
Section titled “Related guides”Need help?
Section titled “Need help?”If you still need help, contact support via the Contact page.