Overview
The Storefront Builder allows you to extend your page layout by adding new sections (blocks) and configuring them individually.
To add a new section, click the Add section button at the bottom of the Central column.
|
|
This opens a pop-up window where you can choose the type of section to add.
|
|
In the pop-up:
The left panel contains a list of available section types (e.g., Banner, Slideshow, Gallery, etc.).
The right panel displays a live preview of the selected section type.
Clicking different section names updates the preview accordingly, helping you choose the appropriate layout.
Once you select a section (for example, Banner), you are taken to the section editing screen.
Choosing to add a "Banner": 
"Banner" section editing screen: 
|
|
Section editing screen
The editing screen is divided into two main areas:
Left panel — contains section settings.
Right panel — displays a live preview of the section within the page layout.
The preview is not isolated: the section is shown in context, between the existing sections of the page. This allows you to immediately see how the new block fits into the overall layout.
To return to the main Storefront Builder screen, click the back arrow (<) next to the section name at the top of the panel.
 |
|
For detailed information about section controls and available settings, see Editing section settings.
Section placement
After saving or exiting the editor, the new section appears in the list of sections in the Central column, directly above the Add section button.
 |
|
The section is also visible in the preview area, positioned between existing blocks (for example, between Bestsellers and Newsletter subscription form).
At the moment, new sections can be added only to the Central column, so that is the only area where the Add section button is available.
Section actions
Each section supports additional actions accessible via the three-dot menu:
Edit — opens the section settings.
Duplicate — creates a copy of the section (the duplicate appears next to the original in the section list).
Delete — removes the section from the page.
The same options are also available from within the section editing screen (Duplicate and Delete).
Editing section settings
Clicking a section name in the list opens its settings.
The section editing screen consists of a settings panel on the left and a live preview on the right. Any changes you make are reflected in the preview immediately, allowing you to see how the section will look within the page layout.
At the top of the settings panel, you can find several controls that apply to the section as a whole:
 |
|
Visibility status (Visible / Hidden) — indicates whether the section is currently displayed on the storefront.
Visible (green) means the section is shown.
Hidden (gray) means the section is disabled.
You can toggle the visibility by clicking the eye icon.
Eye icon — allows you to quickly show or hide the section. The result is immediately reflected in the preview.
Three-dot menu — provides additional actions:
Duplicate — creates a copy of the section.
Delete — removes the section from the page.
Below these controls, you can configure the section content and layout.
 |
|
The available settings depend on the selected section type (e.g., Banner, Gallery, Slideshow, etc.).
Note: Detailed descriptions of settings for each section type are provided in Storefront Builder section settings reference (5.6.x).
To apply your changes, click Save Changes in the top-right corner of the Storefront Builder. This button saves all changes made during the current session.
Can't find answers you're looking for?
Email us at support@x-cart.com. We will be happy to help!