Top Toolbar

The editor's "control panel." The commands you use most often, such as selecting a page, device preview, edit/preview mode, Save (draft without…

Where to find: The thin bar at the very top of the Theme Editor (it stretches horizontally across the whole screen) Who it's for: Everyone who navigates in the editor, switches pages, previews, and publishes In short: The editor's "control panel." The commands you use most often, such as selecting a page, device preview, edit/preview mode, Save (draft without publishing), and Publish, are gathered here.

What does it do?

The top toolbar is the topmost row of the Theme Editor and stays on screen at all times. It shows which page you're on, lets you open and close panels, lets you preview your store on different devices, and most importantly lets you publish your changes. Most of the buttons are in the form of small icons; if you hover over them with the mouse, a small bubble (tooltip) appears telling you what they do.

The bar is divided into two sides: the left side (navigation and page operations) and the right side (preview, publishing, and panel buttons).

Buttons on the left side

From left to right:

Button (icon)	Name (on hover)	What does it do?
Back arrow	Back to Panel	Exits the Theme Editor and returns to your management panel.
Left panel	Open/Close Left Panel	Hides or brings back the Component Library panel on the left. Handy for making more room for the canvas.
Store name / Page name	(Page Selector)	Shows which store and which page you're on. Clicking the page name opens the page list (detail: Pages and Structure).
Pencil	Edit Page	Opens the window for editing the name, address (URL), and SEO information of the open page.
Trash can	Delete Page	Deletes the open page. Only appears on deletable pages — this button does not show on the Home Page, Header Structure, and Footer Structure.
Plus	New Page	Opens the window for creating a new custom page.
v3 badge	(Version number)	Shows which published version of the page you're on (e.g. it increases with each publish).

Warning: Delete Page is an operation that cannot be undone. When you press the button, a confirmation window appears and gives the warning "This operation cannot be undone." To avoid deleting the wrong page, be sure to check the page name in the confirmation window.

Buttons on the right side

The preview and publishing tools are on the right side. From left to right:

1. Device preview buttons (Desktop / Tablet / Mobile)

Three small icons sit side by side:

Icon	Name	How does it show the canvas?
Monitor	Desktop	Shows the store in wide-screen (computer) view.
Tablet	Tablet	Shows it at medium-size (tablet) screen width.
Phone	Mobile	Shows it at narrow (phone) screen width.

The selected device is highlighted in a dark color. These buttons only change the preview; they don't break the actual setting of your store. The purpose is to check how your design looks on different screens.

Tip: Most customers shop from a phone. After adding a component, be sure to switch to the Mobile view and check whether the text overflows and whether the images sit properly.

2. Edit / Preview mode

Two buttons are side by side:

Button	Name	What does it do?
Edit	Edit mode	Normal work mode. You can select components, drag them, and change their settings.
Preview	Preview mode	Hides the left and right panels and removes all editing handles. Shows your store in the clean form the customer will see.

Tip: Switch to Preview from time to time to understand how the design will really look. To return to editing, just press Edit.

3. Status indicator, Save and Publish

The three items in this group (status badge · Save · Publish) determine where your design stands and how you keep it.

Status badge (three states)

Next to the Save and Publish buttons there is a small badge showing which state you're currently in. Don't confuse the three states:

Badge	Color	Meaning
Unsaved changes	amber	You made changes but haven't saved yet. They're lost if you close the tab.
Saved draft · not published	blue	Your draft is safely saved on the server, but not live yet. You can continue tomorrow and publish it.
Live	green	Everything is live; no pending changes.

The badge also shows when you last saved (e.g. "Last saved 14:32").

Save (without publishing)

Button	What does it do?
Save	Saves your design to the server as a draft — without touching the live store at all. You can leave a half-finished design here and continue later. You can also save with Ctrl+S (+S on Mac).

"I want to save without publishing" — this is exactly it. Save keeps your changes as a draft; your customers don't see it. This lets you spread a design across several sessions and press Publish when you're ready. Save is inactive when there are no changes and shows "No changes to save."

Publish

Button	What does it do?
Publish	Sends your changes (your saved draft or current work) to the real store and takes them live. While in progress, the button shows Publishing.... After publishing, the draft is cleared.

Note: Publish only sends the pages and theme settings you changed or have a saved draft for; pages you didn't touch are not re-published. If there's nothing to publish, the message "No changes to publish." appears.

Warning: Publish is the step that opens your changes to customers. Don't publish a design you're not sure of; first Save it as a draft and check it with Preview.

The ⋮ (more actions) menu next to the Save and Publish buttons has two undo options. Tell them apart well:

Option	What does it do?	What it keeps
↺ Discard changes	Reverts the edits you haven't saved in this session.	Returns to your saved draft if one exists (the draft is kept). If there's no draft, returns to the published version.
Delete draft (revert to published)	Deletes the saved draft from the server and returns the editor to the published version.	The live store is not affected. This cannot be undone — a confirmation dialog appears.

Both confirmation dialogs list what will be affected by name: which pages have pending changes (e.g. Home Page, Product Page), plus a General theme settings row if you changed theme settings. The tag next to each row tells you whether that location is unsaved, a draft, or both. So you can see exactly what you are about to lose before confirming.

Seeing pending changes at a glance: hover the status indicator in the top bar — the locations with pending changes are listed by name. The page selector also shows an amber dot next to unsaved pages and a blue dot next to pages with a saved draft.

Why doesn't my change appear on the store? Either you haven't pressed Publish yet (if you only pressed Save, the change stays in the draft, not live), or you never saved. Press Publish to go live.

If two people edit at the same time: If someone else saved and published the same page while you were editing, when you press Save/Publish you'll see the warning "This page was changed by someone else." You can Reload to get their changes, or Overwrite with your version (in which case their changes are lost). This way no one's work is silently lost.

4. Ready-made Themes

Button (icon)	Name	What does it do?
Template	Ready-made Themes	Opens the panel that lets you apply one of the ready-designed themes to your store with one click (detail: Ready-made Themes).

5. Component Pool

Button (icon)	Name	What does it do?
Layers	Component Pool	Switches the right panel to "Component Pool" mode: shows the list of all components on the open page (detail: Component Pool (Right Panel)).

6. Publish History

Button (icon)	Name	What does it do?
⟲ History	Publish History	Switches the right panel to "Publish History" mode: lists this page's earlier publishes and lets you return to an earlier version with one click (detail: Publish History & Restoring an Earlier Version).

7. Theme Settings

Button (icon)	Name	What does it do?
Palette	Theme Settings	Switches the right panel to "Theme Settings" mode: opens all settings that affect the entire store, such as color, font, logo, and fixed buttons (detail: Theme Settings — Site, Color, Type and General).

8. Open/close the right panel

Button (icon)	Name	What does it do?
Right panel	Open/Close Right Panel	Hides or brings back the panel on the right.

Tip: The Theme Settings (palette) and Component Pool (layers) buttons on the right side fill the same right panel with different content. Whichever you press, the panel switches to that mode. If you click a component on the canvas, the panel automatically returns to Properties mode.

A confusing point: the "Theme Output" / Download button

In some screenshots or guides, you might see a download () icon. This is the Get Theme Output button and only appears in developer/test mode. In normal use (in your real store panel) this button is invisible — so if you don't see it, nothing is missing, it's perfectly normal. That's why in daily use you won't have any business with this button.

Frequently asked questions

Q: There's a badge at the top like "v3", what is this? A: It is the page's publish version number. It increases by one with each successful publish. It helps you track which published state of your design you're on; it doesn't expect any action from you.

Q: I can't see the Delete Page and New Page buttons on every page, why? A: The Delete Page button only shows on deletable pages. Because the Home Page, Header Structure, and Footer Structure are protected, the delete button never shows on them (so you don't accidentally delete the skeleton of the store).

Q: I closed the panels, how do I open them again? A: For the left panel, press the Open/Close Left Panel () button at the far left again; for the right panel, press the Open/Close Right Panel () button at the far right again.