How to access on Fynd Commerce
Commerce Panel → Sales Channel (select application) → Theme → Store Design
Theme Editor is a no-code tool for designing and customizing your storefront. This page gets you oriented so you can start making changes right away.
- Your active theme is shown at the top.
- Click Edit to open the Theme Editor.
Only users with the Theme Collaborator or Theme Approver role can access the editor. See Preview & Publish for details on roles.
| Term | Definition |
|---|---|
| Page | A screen in your storefront that customers visit, such as the Home page, a Product page, or the Cart. |
| Header | The top area of every page, typically containing your logo, navigation, and cart icon. Any changes to it apply across all pages. |
| Footer | The bottom area of every page, typically containing links, contact info, and legal text. Any changes to it apply across all pages. |
| Section | A named content block on a page: e.g., Hero Banner, Product Grid, Testimonials |
| Block | A repeatable item inside a section: e.g., individual slides in a carousel |
| Global configuration | An configuration that applies to the whole store: Colors, Typography etc |
| Canvas | A defined layout region within a page. Each canvas holds its own sections and can be edited independently of other areas on the page. |
| Live preview | The center area of the editor showing a real-time preview of your storefront. Click any section directly in it to select it. |
| Section configuration | Opens in the configuration panel when a section is selected. Shows all editable fields for that section. |
| Block configuration | Opens in the configuration panel when a block is selected. Shows all editable fields for that block. |
| Visibility rule | A condition that controls when or to whom a section appears |
| Storefront Builder | An AI assistant built into the editor: open anytime with Cmd+K (Mac) / Ctrl+K (Windows) |
- Toolbar: switch pages, save your work, undo/redo, open live storefront, change preview size.
- Design panel: the leftmost panel. Choose between section configuration (to edit a specific section on the page) or global configuration (to manage store-wide settings like Colors and Typography).
- Live preview: a real-time preview of your storefront. It updates as you make changes. Click any section directly in the preview to select it.
- Configuration panel: the middle panel. Depending on what you select in the design panel, it shows the list of sections on the page, SEO settings, section configuration, block configuration or global configurations.
- Section configuration: opens in the configuration panel when a section is selected. Shows all editable fields for that section.
- Block configuration: opens in the configuration panel when a block is selected. Shows all editable fields for that block.
- Global configuration: accessible from the design panel. Controls store-wide settings that apply across all pages, such as Colors and Typography.
The configuration panel is resizable: drag its right edge to give more space to the preview. Click the arrow icon on the edge to collapse it entirely.
- Open a page: click the page name in the toolbar to open the page selector. Pick any page (e.g., Home).
- Select a section: click a section name in the configuration panel, or click directly on it in the preview.
- Edit a field: in the section configuration on the right, change a text field, pick a color, or toggle a setting. The preview updates instantly.
- Save: click Save in the toolbar, or press
Cmd+S(Mac) /Ctrl+S(Windows).
When you click the page selector, pages are grouped into three categories:
| Category | Description | Examples |
|---|---|---|
| System | Default pages supported across all storefronts, regardless of which theme is active. | Home, Product, Collection, Product Listing, Cart, Checkout, Profile, Blog, FAQ, About Us, Contact Us, Privacy Policy, Shipping Policy, Return Policy, Terms & Conditions, Login, Register, Order Tracking |
| Custom page | Pages defined by your theme apart from system pages. These vary depending on which theme you have installed. | Sitemap (in Turbo theme) |
| Section page | Blank pages that you populate by adding page sections. | Any page you build from scratch using sections |
- Build Your Pages: add, arrange, and remove sections.
- Customize Your Design: change colors and fonts.
- Get Help from AI: use the Storefront Builder for anything.