## Zoho Commerce Help Documentation Index

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

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

# Working with Sections

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.

* * *

## 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](/commerce/help/theme-editor/custom-code/) for more information.

![Custom Section](/commerce/help/new-theme-editor/add-custom-section.png)

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

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)

* * *

## 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.jpg)

* * *

## 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/section-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/incanvas-reorder-section.jpg)

**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.jpg)

* * *

## 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.

## 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/edit-name.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.