# Get Started

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.

## Opening the editor

1. Your active theme is shown at the top.
2. 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.

## Key terms

| 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) |


## Theme editor at a glance

iframe
1. **Toolbar**: switch pages, save your work, undo/redo, open live storefront, change preview size.
2. **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).
3. **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.
4. **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.
5. **Section configuration**: opens in the configuration panel when a section is selected. Shows all editable fields for that section.
6. **Block configuration**: opens in the configuration panel when a block is selected. Shows all editable fields for that block.
7. **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.

## Making your first change

iframe
1. **Open a page**: click the page name in the toolbar to open the page selector. Pick any page (e.g., Home).
2. **Select a section**: click a section name in the configuration panel, or click directly on it in the preview.
3. **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.
4. **Save**: click **Save** in the toolbar, or press `Cmd+S` (Mac) / `Ctrl+S` (Windows).


## Page types

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 |


## Where to go next

* [Build Your Pages](/commerce/docs/manage-website/appearance/theme-editor/build-your-page): add, arrange, and remove sections.
* [Customize Your Design](/commerce/docs/manage-website/appearance/theme-editor/customise-your-design): change colors and fonts.
* [Get Help from AI](/commerce/docs/manage-website/appearance/theme-editor/get-help-from-ai): use the Storefront Builder for anything.