What this means

The editor has three working areas and one toolbar. On smaller screens, the panels appear one at a time: use Sections (or Settings when theme settings are open), Preview, and Selected item to switch between them.

Upstorr Design Control

Upstorr Design Control is Upstorr's name for three ways to design the same storefront. These are not buttons that you have to switch on.

  • Founder Mode is the normal no-code editor. Use the left panel to organise the page and the right panel to change its visual controls.
  • Agency Mode appears when you select a section and use Edit code. It opens only that section's Liquid code instead of exposing the theme's entire collection of files. The section can therefore be changed beyond its prepared controls without turning a small design job into a complete development project. In the code editor, the reset icon restores the installed theme's code in the editor; select Apply code to save that reset.
  • Developer Mode is for building a complete custom theme. Its instructions live separately in Developer Docs, so founders do not have to learn developer tools to use the editor.

Use Founder Mode whenever its controls can create the result you want. Use Agency Mode when one section needs a more specific design.

Before leaving Edit Liquid code, select Apply code to apply your changes to the theme draft. Cancel asks before discarding unapplied code changes. You must still Save and Publish the theme to change the public storefront.

If the section changed while the code editor was open, close and reopen it to use the latest code. If a reset says to remove custom blocks first, return to the section settings and review those blocks before removing them. A rejected code change stays unapplied; read the error and ask your theme designer to correct it.

Left panel: Sections

This is the structure of the current page. It lists large page areas called sections and smaller items called blocks. Use it to select, add, duplicate supported sections, reorder, hide, rename, copy or paste blocks, or remove items. Removing a section or block asks for confirmation. Clicking nested preview content selects the innermost block, expands its path in this panel, and opens its settings on the right. Selecting another item closes the previous expanded branches.

Middle: Store preview

This shows what the draft looks like. It is a working preview, not proof that the public store has changed. Navigation inside the preview lets you inspect other store routes without leaving the editor. Text updates appear as you type. Hover over a blue selection label to choose a parent block or section.

Right panel: Settings

This appears after you select a section or block. It contains the fields that belong to the selected item. Section settings affect the whole section; Block settings affect only that item inside the section. Formatted text fields follow the theme's text size, weight, and line spacing for the current preview size. They use the Admin font; the store preview uses the theme font. Typography presets remain linked to the theme settings.

Sections button

The grid icon returns the left side to the current page's sections and blocks.

Theme settings button

The gear icon replaces the section list with global settings. Global means the change can affect many pages, not only the page currently in the preview.

Page picker

The page name in the top centre changes which page or template you are editing. Changing the picker does not publish anything.

Editor tools on smaller screens

Open the three-dot Editor tools menu for Undo, Redo, Desktop preview, Tablet preview, Mobile preview, Maximise preview, and the editor overlay controls. Use Preview to return to the store view and Selected item to return to the selected section or block's fields.

Undo and Redo

Undo moves one editor change backward. Redo restores a change you just undid. These buttons work with the current editing history; still save important work instead of treating Undo as permanent storage.

Desktop, Tablet, and Mobile

These buttons change the preview width so you can check how a page looks at common screen sizes. To show or hide a selected section or block at one size, use the Show on checkboxes in the right panel. The size buttons only change the preview; changing the section or block settings changes the draft.

Maximise preview

Hides the side panels and gives the preview more room. Exit full view to continue editing fields.

Editor overlays

Overlays show which parts of the preview can be selected. Hide them when you want a cleaner visual check; show them when you want to click a section or block directly.

Status badges

  • Unsaved means the screen contains changes that have not been stored as a draft.
  • The theme status shows whether you are working with a live or draft theme.

Simple example

To check a home-page banner on phones, choose Home page, select the banner in the left panel, edit it on the right, then select Mobile at the top, or Mobile preview in Editor tools on a smaller screen. The preview changes, but customers see nothing new until you save and publish.

What you need to know

  • Selecting something changes what the right panel edits.
  • Changing preview size never changes actual content.
  • Global theme settings can affect several pages at once.
  • Save and Publish are deliberately separate safety steps.