Theme editor

The theme editor is where you build your storefront's home page and set your theme's general settings, with a live preview beside them. Open it from Online store > Themes by selecting Customize on the Current theme card or on a theme in Theme library. It opens in a new tab.

Your changes are saved as a draft as you make them. Customers see them only after you select Publish.

The editor layout

The top bar holds the editor's controls:

The sidebar on the left lists the page's sections under Home page sections, and the preview on the right shows your storefront as you edit it. Select the settings icon at the top of the sidebar to switch to Page settings.

Edit a section

The sections are grouped into Header, Page content and Footer, each with its number of sections.

1. Select a section in the sidebar. The preview scrolls to it.

2. Change its settings. Each change is saved to your draft and shown in the preview.

3. Select the back arrow next to the section name to return to the list.

The settings depend on the section and the theme. Common ones are text and rich text, numbers and ranges, colors, images and videos you upload or pick, checkboxes and options, and lists of items you build with Add item and Edit item.

• Links can point to a Category, Product, Custom page, Legal page, a Blog post you choose in Select Blog, the Faqs page, or Other for any web address. To link your whole blog, choose Other and enter your store address followed by /blogs.

• Products settings let you show Select products, Category products, Recent products or On sale products. With Create new category you can group products for a section in a category that is used only for organization and doesn't appear in your storefront.

For example, the Header group of one enhanced theme has these sections:

• Header settings, to hide the language or the country name in the storefront header.

• The logo, with a desktop logo of 200 × 80 pixels and a mobile logo of 150 × 60 pixels, both optional. Other themes can ask for other sizes.

• The announcement bar: show it, turn on scrolling and set its speed, add its texts and link, and choose the pages that show it.

Add, reorder and manage sections

The Page content group holds the sections of the page body.

• Add a section: select Add section under the list. In the Add new section dialog, search with Search by section name, choose a section, such as a gallery, a product list or a slider, and select Add.

• Reorder: drag a section up or down in the list.

• Manage: open a section's options menu to Hide or Show it, Rename it, Duplicate it, copy it to the other language (Copy section to English language while you edit in Arabic), or Delete it. Hidden sections stay in the list with a hidden icon.

Header and Footer hold the top and bottom of every page. You can edit their settings but not reorder them. In one theme, for example, the footer holds the logo, link groups, about the store and contact details.

Create a section with AI

When your theme supports it, the editor can generate a section from a description.

1. Select Add section and choose the AI generator at the top of the list, or select the Zid AI tool card in the sections list. The AI generator panel opens.

2. Describe the section in Describe what you want to build: its content, layout and what you want to edit later. You can start from an example such as Collection carousel, About us, Testimonials or Promotional banner.

3. Send your description. The section is added to the page as soon as it's ready, so you can close the panel and keep working.

4. To improve it, open the section and describe the change in Want to improve something? Just share.

Generated sections carry an AI Generated tag. You can create a limited number of AI sections each day; the panel shows how many you have left. Your past chats appear in the panel's history, and New chat starts a fresh one.

Change the theme settings

Page settings holds the theme's general settings, such as colors, fonts and the layout of shared elements. The groups depend on the theme. These settings apply across all pages of the theme.

1. Select the settings icon at the top of the sidebar.

1. Open a group and change its settings, such as the product card, the font type or the theme colors.

The theme colors group sets each color with a picker or a hex code:

1. Select the close icon to return to the sections.

Switch layouts with presets

Some themes offer presets: ready-made arrangements of the home page.

1. In the sections list, select Preview presets next to Switch layouts in one click.

2. Browse the presets. Each one has its own tab with preview images.

3. Select Apply, then Apply again in Apply changes to current theme?

Publish or undo your changes

While you have unpublished changes, a bar at the bottom of the editor says Unpublished changes detected.

• Select Publish to make the changes live in your storefront. The status changes to Published.

• Select Undo all changes to discard every change since your last publish.

Restore an earlier version

1. Select History in the top bar.

2. In Version history, find the version by its date. Published versions are marked Published, and your current one Current version.

1. Select Restore and confirm in Restore version?

Preview, export and import

• Preview (in the more-actions menu) opens your storefront with the draft in the selected language, in a new tab.

• Export downloads the theme's settings as a JSON file, so you can keep a copy.

• Import uploads a JSON file you exported earlier and applies its settings to the theme.

Customize a product landing page

Product landing pages use the same editor. Open one with Customize on the Landing pages page, or choose it under Product landing pages in the page selector. For a landing page, the editor has no history, presets, export or import, and Preview opens the landing page itself.

Related

• Store themes

• Brand and logo

• Store menu

• Product landing pages

Last updated 27 October 2026