When you want to customize the look and feel of your online store, the Theme Editor is where you'll spend most of your time. This interface allows you to modify layouts, update content, adjust styles, and preview how your storefront will appear across devices — all without needing to write code.
This article explains how to access the Theme Editor, what each part of the interface does, and how to navigate pages, layers, and settings effectively.
To access,
- Go to Sales Channels.
- Select the sales channel you want to work on.
- Click Themes from the left navigation menu.
- In the Themes Installed table, click the pencil icon.
- Once you click on Edit Theme, the Theme Builder interface opens — allowing you to visually edit your pages
Understanding the Top Menu Bar
The top bar of the editor includes tools for switching stores, switching themes, previewing changes, and managing publishing.
Store Selection Dropdown (e.g., "#6 Furniture Care")
- Displays the current sales channel/storefront you are editing.
- Click to open a dropdown of all available stores.
- Instantly switch to another store without leaving the Theme Editor.
Theme Selector (Theme: Aurora Main)
This dropdown shows all the themes installed for the selected sales channel.
From here, you can:
- Switch between different installed themes
- Confirm whether you’re editing a draft theme or the live (published) theme
- Quickly move to another theme without going back to the Themes page
This helps you manage multiple theme versions and ensures you're always editing the correct one.
Page Selector (Home / Product / Search / etc.)
There are two dropdowns that help you navigate what you want to edit:
A. Page Type Selector
Allows you to switch between:
- Home
- Product Page
- Collection Page
- Search Page
- Blog Post Page
- and Many More
Each page type may have different sections and editable elements.
B. Page Template Selector
Shows the variations of the selected page.
Example:
- Default
- Landing Page
- Custom Template (if created)
Device Preview Controls (Desktop / Tablet / Mobile)
These icons allow you to preview how your page will appear on:
Switch between them to ensure your layout and text look great across devices.
Preview, Save, and Publish
Preview → View changes without publishing.
Save → Save edits as drafts (does not update the live store).
Publish → Pushes your changes live to your storefront.
Tip: Always preview before publishing to ensure everything looks correct.
Theme Builder Interface
On the Theme Builder page, you can design, customize, and structure your storefront visually. This is your workspace for customizing the look, layout, and behaviour of your storefront. The builder lets you visually edit pages, manage sections, adjust settings, and preview changes in real time.
The builder is divided into three main areas:
- Layers Panel (Left)
- Live Preview (Center)
- Settings Panel (Right)
Here is a detailed explanation of each part.
- Left Sidebar — Layers & Sections
This is where you manage the structure of your page. Think of it as the blueprint of your storefront. This panel gives you a complete, structured view of everything that appears on your page.
Layers Panel
If you think of your page like a book, the Layers panel is the table of contents—it helps you see what’s on the page, how sections are arranged, and what each section contains.
Each layer represents a section, such as:
- Image Banner
- Featured Collections
- Product Grid
- Slideshow
- Footer
- Header
The Layers panel displays all the sections and blocks that make up the current page.
It helps you understand the page structure and quickly navigate to the part you want to edit.
For example, in the screenshot:
- You can see two main sections:
- Image Banner With CTA
- Featured Collections
When you click on a section (such as Image Banner With CTA):
- The section expands into individual blocks such as the Heading or Button.
- The same section on the preview becomes highlighted, helping you visually confirm which part of the page you're working on.
ADD SECTION Button
The Add Section button lets you insert new content blocks (such as banners, product grids, or text areas) into your page without any coding. Every time you add a section, it appears in three places at once:
- In the Layers panel on the left
- On the page preview in the middle
- In the settings panel on the right (so you can immediately edit it)
Step 1 – Open the Add Section Panel
- In the Layers panel on the left, click
+ Add Section. - A new panel slides out with a list of all available section types.
You’ll see section groups such as:
- All
- Featured in Focus
- Featured Collections
- Featured Product Recommendations
- Text & Image
You can either scroll through these groups or use the search bar at the top to quickly find a section by name (for example, type “image” to find all image-based sections).
Step 2 – Choose the Section You Want to Add
- Click on the section type you want to use, for example:
- Image Banner to add a full-width hero image with text and a button
- Featured Collections to highlight selected collections
- Title & Text to insert a text-based content block
- As soon as you click a section, it is:
- Added to the bottom of the Layers list
- Inserted on the page preview in the center
- Automatically selected so you can start editing it straight away
You can then drag the section up or down in the Layers list if you want to change its position on the page.
Step 3 – Edit the New Section (Right-hand Settings Panel)
After you add a section, the right-hand panel shows the settings for that specific section. This is where you customise how it looks and what it contains.
Depending on the section type, you might see options like:
- Image – Upload or change the image used in the section
- Heading / Text – Update the title, subtitle, or description
- Button label & link – Change the button text (e.g. “Shop Now”) and decide where it should link
- Style Settings – Choose a color scheme (Light/Dark), adjust height, spacing, and alignment
- Content source – For product or collection sections, choose which products/collections to display
Tip: The pattern is always the same:
Left = where the section lives (Layers)
Middle = how it looks (Preview)
Right = how you configure it (Settings)
Step 4 – Fine-tune Content Using Blocks (Inside a Section)
Every section is made up of smaller building blocks.
Think of it like this:
- Section = container (for example: Image Banner with CTA)
- Blocks = pieces inside the container (for example: Image, Heading, Subheading, Button)
Editing at section level changes the overall look (height, color scheme, alignment, etc.).
Editing at block level changes the actual content (words, image, button label, links).
4.1 Open the Section to See Its Blocks
- Go to the Layers panel on the left.
- Find the section you want to adjust (for example, Image Banner With CTA).
- Click on the section name to expand it.
- You’ll see a list of blocks under it, such as:
- Image
- Heading
- Subheading / Text
- Button
Each of these is an individual element you can control.
4.2 Select a Block to Edit
- In the expanded section, click on a block — for example, Heading.
- Three things happen at the same time:
- The block is highlighted in the Layers panel.
- The corresponding area on the page (center preview) gets a blue outline so you know what you’re editing.
- The right-hand settings panel switches to show options only for that specific block.
This helps you clearly see: “This is the exact text / button / image I’m working on now.”
4.3 Block-Specific Settings (What You Can Change)
Depending on which block you select, you’ll see different options on the right:
Example: Heading Block
You might see fields like:
- Heading text – Change the main headline (e.g. from “Keep the world adventurous forever” to your own brand message).
- Text alignment – Left, center, or right within the banner.
- Typography options – Font size, font weight, letter spacing (depending on theme design).
What it affects: Only the heading text and style in that banner — not the whole section.
Button Block
Typical options include:
- Button label – Change the text on the button (e.g. “See More”, “Shop Now”, “Learn More”).
- Button link / URL – Choose where the button sends customers:
- A product page
- A collection
- A blog post or static page
- An external URL
- Button style – In some themes, you may see primary/secondary style, outline vs. solid, etc.
What it affects: Just that one button — its wording, look, and destination.
Image Block
You will see:
- Image picker / upload – Choose a new hero image from your library or upload a fresh one.
- Alt text – Short description for accessibility and SEO (for example, “Family driving through mountain road at sunset”).
What it affects: Only the image used in that specific banner section.
4.4 How Section Settings vs. Block Settings Work Together
To make things clearer:
- Think of this as: “How does this entire strip on the page behave and look?”
- Overall height of the banner (e.g. 400 px)
- Color scheme (Light/Dark)
- Padding / spacing around the whole block
- General alignment
- Think of this as: “What exactly is inside this strip?”
- The exact words for the heading
- The specific image you use
- The link and label of the button
You can safely experiment:
- If something doesn’t look right, just:
- Change the text back
- Pick a different image
- Or use Clear (Use clear to remove the image from this section)
- Or Exit the section without Saving
Nothing you do here goes live until you click Save and Publish, so it’s a safe environment to try different combinations.
- While working on the changes, click save to save the progress.
- Once all the changes are done, click on Publish. The system will ask you to type “PUBLISH” in a text box for confirmation, type publish and the changes will be implemented.
4.5 Example – Updating a Hero Banner
- Select the section:
- Click Image Banner With CTA in the Layers panel.
- Adjust section look (optional):
- On the right, set:
- Color scheme to Dark
- Height to 500 px
- Alignment to center
- Edit the heading block:
- Click Heading under that section.
- Change text to: “New Season. New Adventures.”
- Make it bold or increase font size or adjust allignment.
- Edit the button block:
- Click Button.
- Change label to “Shop New Arrivals”.
- Link it to your New Arrivals collections/any page.
- Edit the image block:
- Click Image.
- Upload a new banner image that matches your brand.
- Add meaningful alt text for accessibility.
Now your hero banner is updated visually (section) and contextually (blocks) — all without touching any code.