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.

They do have a second job though: the device you pick also decides which device a change is saved to while you are editing a component. To make a phone-only setting see Device-Specific Settings (Desktop / Tablet / Mobile)

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.

Preview data: sample or real?

Many of your store's pages are drawn from a single template but open with thousands of different contents: the product page uses the same template for every product, the category page for every category. That is why a picker appears in the top-right corner of the canvas while you edit those pages: "which content should I show in the preview?"

First things first: sample data does NOT reach your live site. The picker only affects your editor screen. Sample products, sample categories and sample posts are not added to your catalogue, their addresses do not open for visitors, they do not enter your sitemap or product feeds, and they are not sent to search engines. The sample you pick is not published with the template even when you press Save and Publish — what gets published is your design, not the content you saw in the preview.

Which pages have a picker?

Page	What the picker offers
Product Page	Three ready-made samples (simple · with variants · bundle product) + Pick a product from my store…
Category Page	Three ready-made samples (main category · subcategory · colour/size filtered) + Pick a category from my store…
Brand Page	Three ready-made samples (with logo · without logo · no products) + Pick a brand from my store…
Tag Page	Three ready-made samples (popular · few products · no products) + Pick a tag from my store…
Blog Page	Three ready-made samples (full list · filtered by topic · empty blog) + My store's real posts…
Blog Article Page	Two ready-made samples (long post with cover · short post without cover) + Pick a post from my store…
Search Results	Three ready-made samples (search with results · without results · no query) + Search my store… (you type your own word)
Form Page	Three ready-made samples (contact · appointment application · single-field form) + Pick a form from my store…

Other pages have no picker, and do not need one:

Cart, Checkout, Account, Login/Register, Review — these depend not on a "content" but on the visitor's state (what is in their cart, whether they are signed in). Since there is no session in the editor, these pages fill themselves with sample data automatically: a sample order, a sample coupon, a sample favourite. You do not choose anything.
Home Page — it already fills with your real catalogue.
Header/Footer Structure, Custom Pages, 404 / Error / Maintenance — they need no data.

How do I use the picker?

Click the button in the top-right corner of the canvas (e.g. Pick a preview brand).
The menu that opens has two parts:
- Ready-made sample … — representative content prepared by Treyza. Each one shows a different situation: a full list, an empty list, a long description, a record without an image. This is the quickest way to test how your template holds up in awkward cases.
- Pick a … from my store… — choose your own product, category or brand; the template is drawn with your real data.
To clear your choice, use the Remove preview … row in the same menu.

On the search page a small dialog opens instead of a menu: you can pick a ready-made sample or type your own search word (e.g. shirt).

"These aren't my products" — how do I recognise sample data?

While sample data is shown, the editor makes it obvious in two places:

An explanatory strip appears above the canvas — for example "Sample brand data is shown — use the picker in the top right to select a real brand."
A small ÖRNEK (sample) badge appears next to the content's name.

Buttons and links on the canvas are also not clickable while sample data is shown, so you cannot accidentally navigate to a page that does not exist.

Which one is selected when the page opens?

The Product Page opens with one of your real products. Working with your own product is usually more useful; switch to a sample from the picker if you prefer.
The other seven pages open with sample data, so you can see how the page will look even while your catalogue, blog or form list is still empty.
If a real item you picked with Pick a … from my store… is later deleted or unpublished, the editor quietly falls back to the sample; you are never left with a blank screen.

An empty catalogue is an advantage here. A new store has no products, categories or blog posts yet — sample data lets you finish the design before entering any content.

Sample images are samples too. The photos in the sample content are Treyza's preview images; they are not added to your gallery and cannot be used in your store.

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).

Q: The products/categories I see in the editor are not mine. Will they show on my site too? A: No. These are Treyza's sample data and they are drawn only on your editor screen. They are not added to your catalogue, their addresses do not open for visitors, they do not enter your sitemap, and they do not go live when you press Publish. To work with your own content, use Pick a … from my store… in the top-right picker. Details.

Q: I click a button on the canvas and nothing happens. A: If sample data is being shown, links and buttons are deliberately not clickable — this stops you from navigating to a page that does not exist. To try the real behaviour, first pick your own content from the top-right picker.

Q: I can't see a preview picker in the top right. A: The picker only appears on content-driven pages (Product, Category, Brand, Tag, Blog, Blog Article, Search, Form). The Cart, Checkout, Account, Login/Register and Review pages already fill themselves with sample data, and the Home Page shows your real catalogue.

On this page