How do I edit my store design in the theme editor?
The theme editor shows your real store while you edit. Every change appears in the preview instantly, and when you click Save it goes live for shoppers straight away.
In this article
The theme editor is where you change your store's texts, images, sections and colours while watching the result. The preview inside the editor is your real store with your products, and it updates with every change before you save.
How do I open the editor?
- Open Marketplace from the side menu.
- On the card marked Active, click Customize.
- The "Live theme editor" opens full screen.
Tip: make sure you're editing the active theme. If you open Customize on a different theme, your edits are saved for that theme and won't appear on your store until you install it.
The editor layout
- The Sections list on the side: your home page sections in order, a "Search elements..." box, and on top "Global Design" (colours) and, in some themes, "Advanced (CSS/JS)".
- The settings panel: choosing a section shows its settings, grouped into Content, Style, Visibility and Advanced.
- The preview: your real store. You can also click any section inside the preview to jump to its settings.
Top bar buttons
| Button | What it does |
|---|---|
| Desktop / Tablet / Mobile icons | Preview your store at different screen sizes. |
| EN / AR | Switches the language you're editing. Texts are stored separately per language — see Store language and light/dark mode. |
| Moon ("Toggle dark mode") | Shows the preview in dark mode only; it doesn't change your store setting. |
| Refresh preview | Reloads the preview. |
| Undo / Redo | Step back or forward through your edits (Ctrl+Z and Ctrl+Shift+Z). |
| Discard unsaved changes | Throws away everything since your last save, after asking "Discard all unsaved changes?". |
| Save changes | Saves and applies your edits to the store. |
Saving is publishing
As soon as you change something, a bar appears at the bottom saying "You have unsaved changes" with Discard and Save. Click Save (or "Save changes" at the top) and you'll see "Changes saved successfully".
Important: there is no separate publish step. Saving applies your edits to the live store immediately and shoppers see them right away. Check the preview before you save.
If you try to leave the page with unsaved edits, your browser warns you first.
Uploading images in the editor
Fields that take an image have an "Upload image" button ("Change image" if one is already set). Accepted formats: PNG, JPG, WEBP and GIF, up to 8 MB.
Custom CSS and JavaScript
Under "Advanced (CSS/JS)" you can add CSS in every theme, and JavaScript in some themes only. This is for experienced users — broken code can break your store's look. JavaScript doesn't run inside the preview, and any code that tries to hide or change the platform credit line in the footer is removed automatically when you save.
If saving fails
- "Could not save, try again": usually a connection issue. Your edits are still on the page — save again.
- "Theme settings are too large…": shorten custom code or very long texts, then save again.
Was this article helpful?