Theme Editor — Overview

A visual design tool where you build the customer-facing pages of your store piece by piece (component by component) with a "drag-and-drop" approach.

Where to find: From the management panel, Theme Editor (opens full screen; you exit back with the Back to Panel arrow at the top left) Who it's for: Every store owner who wants to design the look of their online store (storefront) by hand, without writing code In short: A visual design tool where you build the customer-facing pages of your store piece by piece (component by component) with a "drag-and-drop" approach.

What does it do?

The Theme Editor is where you decide how your online store (your storefront), the thing your customers see, will look. From the large promotional image on your home page, to the category tiles, to the "Frequently Asked Questions" section, all the way down to the contact information at the very bottom (footer), you design everything here.

The best part: you don't need to know how to code. You grab ready-made "building blocks" (we call these components), drag them onto your page, and then change their colors, text, and images. You see every change you make instantly in the preview in the middle of the screen.

Tip: Think of the Theme Editor like a "pinboard." You have ready-made cards (components) in your hand; you arrange them on the board and decorate them however you like. If you don't like one, you can remove it and put a new one in its place.

The overall layout of the screen: 3 panels

When the Theme Editor opens, the screen is divided into three main sections:

Section	Its position	What does it do?
Component Library	Left panel	The list of ready-made building blocks (components) you can add to the page. You grab them from here and drag them to the middle.
Canvas	Middle (the widest area)	A live preview of your store. Everything you add appears here in its real form. You select, drag, and order components from here.
Right Panel	Right side	It has three different jobs (below). Here you manage the settings of the component you selected, the list of all components on the page, or the overall appearance settings of the entire store.

The Right Panel can switch between three different modes (changed with the buttons on the top toolbar):

Properties — You edit the settings (text, color, image, spacing, etc.) of a component you selected on the canvas.
Component Pool — The list of all components on the open page; you hide/delete/reorder them.
Theme Settings — Overall settings that affect the entire store (color palette, font, logo, fixed buttons, etc.).

Tip: If the left and right panels feel too narrow, you can hide them with the panel open/close buttons on the top toolbar to make more room for the canvas. This makes your work easier, especially on small screens.

Basic concepts (glossary)

Let's explain the terms that come up often in the Theme Editor right from the start:

Term	What does it mean?
Storefront / Store	The online site that your customers see and buy products from. (The management panel is your back office, while the storefront is the face the customer sees.)
Component	A piece / building block of the page. Example: a promotional banner, a row of category tiles, a "Frequently Asked Questions" section.
Page (Template)	A screen of your store. Example: Home Page, Category Page, Product Page, the Custom Pages you make yourself.
Structure (Header / Footer)	Sections that appear in common across all pages. Header Structure = the menu/logo at the very top of pages (header). Footer Structure = the contact/link section at the very bottom (footer). You design it once, and it appears on every page.
Canvas	The live preview area in the middle.
Properties	The settings of the component you selected (opens in the right panel).
Container	How wide an area the content will span on the page.
Publishing	Taking the changes you made live on the real store. Customers don't see the change until you publish.

Pages and Structure: the difference between them

This is what beginners confuse the most, so let's clarify it from the start:

Pages are the separate screens the customer browses: Home Page, Category Page, Product Page, and the Custom Pages you create (for example an "About Us" page).
Structure, on the other hand, is the two sections that appear in common on every page:
- Header Structure (Header): The logo, menu, search, and cart at the top of pages — the same on every page.
- Footer Structure (Footer): The links, contact info, and social media at the very bottom of pages — the same on every page.

So if you edit the Header Structure once, the top of all the pages in your store changes. This is a big convenience: you don't build the menu on each page one by one.

Tip: When you enter for the first time, the system automatically creates a Home Page, a Header Structure, and a Footer Structure for you. So you're not left alone with a blank screen; you start working on a ready-made skeleton.

Typical workflow (summary)

As a store owner, in the Theme Editor you generally follow this order:

Select a page. From the page menu at the top, choose which page you will edit (e.g. Home Page).
Add a component. Grab a building block (e.g. a promotional banner) from the left panel and drag it onto the canvas in the middle — or click on it.
Customize. Click the component you added on the canvas; from the Properties that opens in the right panel, change its text, color, and image.
Reorder. Adjust the order of components on the page by dragging them up and down.
Set up the overall settings. From the Theme Settings button at the top, determine your store's color palette, font, and logo.
Preview. Switch to Preview mode at the top and to the different device views (desktop/tablet/mobile) and check.
Publish. If everything is ready, press the Publish button at the top right. The changes are now live on your real store.

How do saving and publishing work? (VERY IMPORTANT)

Misunderstanding this topic leads to problems like "my changes are gone" or "the change I made doesn't appear on the store." Read carefully:

Most of the design changes you make in the Theme Editor (adding/deleting components, color, text, ordering, theme settings) are first kept only on your screen. Customers cannot see them until you press Publish.
When you press the Publish button, all these accumulated changes are sent to the real store and taken live.

Warning — there are two exceptions: The two setting groups below are independent of Publish and are automatically saved the moment you change them (to a separate system):

Setting	Behavior
Theme Settings → Payment tab	Each change is automatically saved within a few seconds. It does not wait for "Publish."
Theme Settings → Product tab (product card, gallery, etc.)	It is saved instantly when you press the Save button in the dialog. It does not wait for "Publish."

So the changes you make in these two sections are reflected on the store even if you don't press Publish.

Warning — unsaved changes: If you have changes on a page that you haven't published and you try to switch to another page, the system stops you with an Unpublished Changes warning. Here you have three options: Cancel (give up on switching), Discard Changes (delete the changes, switch without saving), or Publish and Continue (publish first, then switch). The Discard Changes option cannot be undone.

Other guides in this section

Because the Theme Editor is a wide area, we've split it into separate guides. We recommend reading them in order:

Top Toolbar — What all the buttons at the very top do (Top Toolbar)
Pages and Structure — Creating, editing, deleting pages; Header/Footer Structure (Pages and Structure)
Component Library — The left panel; how to add a component (Component Library (Left Panel))
Canvas and Preview — The work area in the middle; ordering, preview (Canvas and Preview)
Properties Panel — Editing the settings of a component (Properties Panel (Right Panel))
Component Pool — Managing the components on the page in bulk (Component Pool (Right Panel))
Theme Settings (Site, Color, Font) — Overall appearance settings (Theme Settings — Site, Color, Type and General)
Fixed Buttons, Behavior, Payment — Other theme setting tabs (Theme Settings — Fixed Buttons, Behavior and Checkout)
Product Appearance Settings — Product card and product page design (Theme Settings — Product Appearance Settings)
Ready-made Themes — Applying a ready-made theme with one click (Ready-made Themes)
Component Catalog — A one-by-one introduction of all components (Component Catalog (All Components))
Artificial Intelligence Tools — The AI buttons that help you with design (Artificial Intelligence (AI) Tools)

Frequently asked questions

Q: Do the changes I make appear to customers immediately? A: No. Most design changes stay only on your screen until you press Publish. (Exceptions: Payment and Product settings — those save instantly.)

Q: What happens if I accidentally break something? A: If you haven't pressed Publish yet, when you close and reopen the page, the unpublished changes are gone and you return to the last published state. Also, if you wish, you can start fresh with a clean design from Ready-made Themes (see Ready-made Themes).

Q: Does changing the look of the store affect my products or orders? A: No. The Theme Editor only deals with appearance. Your products, your stock, and your orders sit in separate sections and are not affected by the design changes you make here.

Q: Should I design from a computer or from a phone? A: The Theme Editor is a wide tool; to work comfortably, we recommend using it from a computer (wide screen). But you can always check how the store you designed will look on a phone with the Mobile preview button at the top.

Theme Editor — Overview

On this page