Canvas and Preview

A live preview of your store. You select components from here, order them by dragging; you check them in different device views and in preview mode.

Where to find: The large area in the middle of the Theme Editor (the live image of your store) Who it's for: Everyone who places and orders the components they add and wants to see the result In short: A live preview of your store. You select components from here, order them by dragging; you check them in different device views and in preview mode.

What does it do?

The Canvas, the widest area in the middle of the screen, shows the real image of your store live. Every component you add from the left panel appears here in the form the customer will see. When you change a setting, you see the result here instantly — that is, you don't work "blind," you see what you're doing at all times.

The canvas is actually a live window into your store (technically a "preview frame"). That's why, while it's loading, you might briefly see the text Loading preview... and a spinning icon; this is normal, and within a few seconds your store appears.

Selecting and editing a component on the canvas

Click on the section (component) you want to edit on the canvas.
The component is selected and the Properties open in the right panel.
Now you can change that component's text, color, image, and spacing from the right panel (detail: Properties Panel (Right Panel)).

When you hover over a component with the mouse, small handles/buttons appear for moving, hiding, or deleting it. These buttons appear directly on top of the component.

Tip: If you're not sure which component you've selected, or if you have trouble clicking the right component on a crowded page, use the Component Pool (right panel). There, all the components on the page are in a list; selecting from the list is easier than clicking on the canvas (see Component Pool (Right Panel)).

Ordering components (drag-and-drop)

To change the up-down order of components on the page:

Hold down with your mouse on the move handle (the drag point) of the component you want to order.
Drag it up or down. While dragging, a line/marker appears showing where the component will be placed.
When you reach the position you want, release the mouse. The component settles into its new order.

If you bring the mouse close to the top or bottom edge of the canvas during dragging, the page scrolls automatically; this makes it easier to move a component up/down on long pages.

Tip: If you find ordering with drag-and-drop difficult, you can also grab and order components from the Component Pool — it's more organized there.

How do the Header Structure and Footer Structure appear on the canvas?

When editing a normal page, in addition to that page's own components, the shared Header Structure (at the very top) and Footer Structure (at the very bottom) sections also appear on the canvas (if they're enabled). This way you see how the page will really look, together with the menu and footer.

Warning: If you edit the menu (Header Structure) or the footer (Footer Structure) on the canvas, this affects all of your pages — because they are shared. If you want to add something specific to just a single page, add it not to the Header/Footer Structure but to the page's own body.

Empty page view

If there are no components on a page yet, the canvas appears empty and a message appears guiding you: No components added yet and below it Start by dragging or clicking a component from the left panel. This means "add a component here from the left panel."

If no page is selected, the canvas shows the Select a page message; just select a page from the page menu at the top.

Device views: Desktop / Tablet / Mobile

The three device buttons (/ / ) on the top toolbar change the width of the canvas:

View	Canvas width	What for?
Desktop	Full width	The view on a computer screen.
Tablet	Medium (≈768 pixels)	The view on a tablet screen.
Mobile	Narrow (≈375 pixels)	The view on a phone screen.

These buttons don't change the actual setting of your store; they only show the preview at that device width.

Tip: You can make a component appear only on a phone or only on a computer (from the component's Visibility setting — see Properties Panel (Right Panel)). If you've made such a setting, test whether it works correctly with these device views.

Edit / Preview mode

The Edit and Preview buttons on the top toolbar change how the canvas works:

Edit: Normal work mode. You can select and move components and change their settings. The left and right panels are open.
Preview: The editing handles disappear and the panels are hidden. The store appears exactly as the customer will see it, in its clean form. You can examine it without the risk of accidentally moving/deleting anything.

Tip: After finishing a section, switching to Preview to check the real look is a good habit. Then you return to Edit and continue working.

If the preview doesn't load

Rarely, the canvas may show an error message and fail to load. In this case you'll see an error text and a Try again button. Pressing Try again usually solves the problem. If it doesn't, try refreshing the page (the browser).

Frequently asked questions

Q: I click a component on the canvas but it doesn't get selected / the wrong component gets selected. A: With nested components (for example a piece of text inside columns) it can be hard to click the right piece. The easiest is to select from the Component Pool. Also, to return from the inner component you selected to a parent component, you can use the Parent Component button at the top of the right panel.

Q: In mobile view the text/images overflow. A: This may mean that component is set too large for mobile. Select the component and from the right panel make the text size, spacing, or image settings suitable for mobile. You can also prefer to completely hide some large components on mobile (Visibility setting).

Q: My changes appear on the canvas but not on my store. A: The canvas shows your working copy. For customers to see them, you need to take the changes live with Publish (except Payment and Product settings — those save instantly).

On this page