§ 03 / Docs

Theme editor

The theme editor lets you design your storefront without code. You edit sections (header, hero, product grids, footer, and more), preview changes instantly, save drafts, and publish when you are ready for customers to see the result.

Editor layout

The workspace splits into a preview canvas (your store as customers will see it), a section list or drawer for navigation, and a settings panel for the selected section. The top navbar holds save, publish, device preview, and theme preset controls.

Layout

+--------------------------------------------------------+
| Navbar: Save draft | Publish | Preset | Device | Help    |
+----------+-----------------------------+----------------+
| Sections |      PREVIEW CANVAS         | Settings panel |
|  list    |   (click section to select) | (content/style)|
|  drawer  |                             |                |
+----------+-----------------------------+----------------+

Draft vs publish

Save draft stores your work on the server but does not necessarily change the live storefront until you publish. This lets you experiment safely. Publish pushes the current draft to what customers see. Always preview before publishing major changes.

Steps

Make edits to one or more sections in the settings panel.
Click Save draft — the preview updates immediately.
Open your storefront in another tab to double-check.
Click Publish when you are satisfied with the result.

Working with sections

Each page is built from ordered sections. Click a section in the preview or open the sections drawer to select it. The settings panel shows fields specific to that section type — for example hero headline, announcement bar text, or footer links. Reorder or add sections from the sections drawer.

Steps

Open the sections drawer from the navbar or sidebar control.
Select a section — its outline highlights in the preview.
Edit content and style fields; changes reflect in the preview.
Drag sections to reorder, or add a new section type from the library.

Layout

Section flow
------------
Sections drawer --> Select section --> Settings panel
       |                                      |
       v                                      v
  Reorder / Add                         Live preview

Theme presets and colors

Theme presets apply coordinated colors, typography, and spacing across sections. Many sections also expose shared style overrides (background, text color, padding). Section-level settings win over preset defaults when you customize them.

Steps

Choose a preset from the navbar picker to reset the overall look.
Select a section and expand style fields for local overrides.
Use contrast-friendly text/background pairs for readability.

Device preview

Switch between desktop, tablet, and mobile widths to ensure layouts respond well. Hero images and navigation especially should be checked on narrow screens before publishing.

Back to all docs