## Zoho Commerce Help Documentation Index

Access the complete documentation index at:
https://www.zoho.com/en-us/commerce/help/llms.txt

Use this file to discover all available documentation pages before proceeding.

# Working with Sections

 ![](/commerce/images/ue-resources/llm-utility-menu/sparkle-ai.svg) Explore With AI ![](/commerce/images/ue-resources/llm-utility-menu/dd-arrow.svg) 

*   [Open in ChatGPT (opens in new tab)](https://chatgpt.com/?prompt=Analyze+the+content+of+https%3A%2F%2Fwww.zoho.com%2Fen-us%2Fcommerce%2Fhelp%2Ftheme-editor%2Fsections%2F+and+understand+it+thoroughly+so+I+can+ask+questions+about+it.)
*   [Open in Claude (opens in new tab)](https://claude.ai/new?q=Analyze+the+content+of+https%3A%2F%2Fwww.zoho.com%2Fen-us%2Fcommerce%2Fhelp%2Ftheme-editor%2Fsections%2F+and+understand+it+thoroughly+so+I+can+ask+questions+about+it.)
*    ![Copy for LLM](/commerce/images/ue-resources/llm-utility-menu/copy.svg) Copy for LLM
*    [![View as Markdown](/commerce/images/ue-resources/llm-utility-menu/md.svg) View as Markdown (opens in new tab)](/en-us/commerce/help/theme-editor/sections/index.md)

Sections are the main building blocks of your online store pages. Each section is a self-contained content area - a banner, a product grid, a testimonial strip, and so on. You can add, reorder, edit, and remove sections freely. You can also create custom sections using the code editor or generate them with AI.

* * *

## Adding a Section

There are multiple ways to add a section:

*   **Insert Section** - Opens the section picker panel to browse and add a pre-built section.
*   **Add Section Above** - Adds a new section above the currently selected section.
*   **Add Section Below** - Adds a new section below the currently selected section.
*   **Add Custom Section** - Opens the code editor to write a custom liquid section. Refer to [Custom Code](/en-us/commerce/help/theme-editor/custom-code/) for more information.
*   **Generate with AI** - Opens the AI-powered section generator to create a section from a description. Refer to [Generating Sections with AI](/en-us/commerce/help/theme-editor/sections/#generating-sections-with-ai) for more information.

To add a pre-built section to your page, click **Insert Section** in the toolbar. The section picker panel opens, showing available sections organized into three tabs: **Header**, **Template**, and **Footer**.

![Section Picker](/commerce/help/new-theme-editor/insert-section.png)

In the section picker, sections are organized into three tabs based on their position in the page:

Tab

Description

**Header**

Sections that appear in the header area of the page

**Template**

Sections that appear in the main content area of the page

**Footer**

Sections that appear in the footer area of the page

Each tab lists available presets for that area. Each entry is a **preset** - a named, ready-to-use layout variant. Some section types offer multiple presets (for example, “Banner - Left Aligned” and “Banner - Centered” are two presets of the same banner section). Click a preset to insert it.

Alternatively, you can add a section at a specific position:

1.  Click **Show Sections** in the toolbar to open the **Sections List** panel.
2.  Select an existing section.
3.  Click the **More Options** icon (three dots) on the section.
4.  Choose **Add section above** to insert a new section above the selected section, or **Add section below** to insert below it. The _Add Section_ panel opens, showing available presets for that area. Click a preset to insert it.

![Sections List Panel](/commerce/help/new-theme-editor/add-section-above.png)

* * *

## Generating Sections with AI

Use **Generate with AI** to create page sections from a description of what you want to build.

1.  In the Theme Editor toolbar, click **Generate with AI**.

![Generate with AI](/commerce/help/new-theme-editor/generate-with-ai.png)

2.  In the **Describe what you want to build** field, enter a description of the section you want to create. Include details such as its purpose, content, or style to guide the result.
3.  The AI will generate the custom code for the desired section. You can preview the generated section in the canvas before adding it to your page.

![AI Custom Code](/commerce/help/new-theme-editor/ai-custom-code.png)

4.  You can use the **AI Chat** tab to refine the generated section by providing additional instructions or asking for modifications.

![AI Chat](/commerce/help/new-theme-editor/ai-chat.png)

5.  Click **Save Code** to save the custom section.
6.  Click **Save and Add Section** to add the generated section to your page.
7.  Once the process is complete, the new section will be added to your page and you can edit it as needed using the properties panel.

![AI section properties](/commerce/help/new-theme-editor/ai-section-properties.png)

* * *

## Selecting a Section

Click anywhere on a section in the canvas to select it. A solid blue outline appears around it and the **Properties** panel opens on the right.

You can also click the section’s name in the **Sections List** panel.

![Selecting a Section](/commerce/help/new-theme-editor/section-list.png)

* * *

## Editing Section Settings

With a section selected, the **Properties panel** on the right shows all the options for that section.

![Section Properties](/commerce/help/new-theme-editor/banner-properties.png)

*   Change images, text, colors, layout options, margins, and more directly in the panel.
*   Changes update the canvas preview in real time.
*   Scroll down to see all available settings for the section.

* * *

## Reordering Sections

**Using the in-canvas action toolbar:** Select a section, then use the **arrow up** and **arrow down** buttons in the toolbar that appears above the section to reorder the section above or below.

![In-canvas action toolbar](/commerce/help/new-theme-editor/reorder-custom-section.png)

**Using the Sections List:** Open the **Show Sections** panel. Hover over the required section and click and hold the **drag handle** (six dots) to drag and move the sections listed in the required order and it will be reflected in the canvas immediately.

![Sections List Panel](/commerce/help/new-theme-editor/reorder-section.png)

* * *

## Renaming a Section

Click the **More Options** menu on a section row and choose **Edit Name**. Type the new name and confirm. This name is only visible inside the editor.

![Edit Section Name](/commerce/help/new-theme-editor/rename-section.png)

* * *

## Copying a Section

Click the **More Options** menu on a section row in the Sections List and choose **Copy**. The duplicate is inserted immediately below the original.

![Copy Section](/commerce/help/new-theme-editor/copy-section.png)

* * *

## Hiding and Showing a Section

Click the **More Options** menu on a section row in the Sections List and choose **Toggle visibility**. Hidden sections remain in your page configuration but are invisible to visitors. Repeat to show it again.

## Hiding and Showing a Section

Click the **More Options** menu on a section row in the Sections List and choose **Toggle visibility**. Hidden sections remain in your page configuration but are invisible to visitors. Repeat to show it again.

![Toggle visibility](/commerce/help/new-theme-editor/hide-section.png)

* * *

## Deleting a Section

Click the **More Options** menu on a section row and choose **Delete**, or use the **Delete Component** button at the bottom of the Properties panel.

![Delete Section](/commerce/help/new-theme-editor/delete-section.png)

**Note:** Use **Undo** (Cmd/Ctrl+Z) if you delete a section by mistake.