X-Cart's Storefront Builder allows you to visually manage your storefront layout and theme settings using a live preview interface.

You can access the Storefront Builder using the Customize storefront button on the Design > Themes page.

After clicking the button, you're redirected to the Storefront Builder page.

The screen is divided into two main areas:

The Builder provides several basic controls that allow you to:

After making any changes in the Storefront Builder, be sure to apply them permanently using the Save button in the top-right corner.

You can exit the Storefront Builder at any time using the Exit button in the top-left corner.

The following sections provide information about the Labels editor, Layout settings and Theme settings.

Most text elements in the storefront are stored as text labels. You can easily edit them using the Labels editor, which is available as part of the Storefront Builder. To activate the editor, use the switch located at the top of the screen.

When the Labels editor is active, all text labels in the preview area appear highlighted, allowing you to identify and edit them directly.

When you click on a text label in the preview area, a pop-up dialog appears, allowing you to edit the label text.

The dialog displays the current label value and provides a text field where you can modify it. After making changes, click Save changes to apply them or Cancel to discard your edits.

When the toggle at the top of the left sidebar is set to Layout settings, the sidebar displays the list of sections and blocks that make up the currently opened page.

The Preview area behaves like a live version of your storefront:

For example, if you navigate from the Front page to a category or product page, the sidebar will update to display the sections and blocks that belong to that page.

When you move the cursor over items in the left sidebar, the corresponding section/block is highlighted with a blue outline in the preview area. This helps you visually identify which part of the page you are editing.

Each section/block has a drag handle icon (four-directional arrow).

You can:

Changes are reflected instantly, allowing you to fine-tune page structure visually.

Each section's visibility status is controlled by a visibility icon (eye icon).

This allows you to disable sections and blocks without permanently deleting items.

The names of hidden sections and blocks are grayed out. Hidden items are displayed as a separate list.

The Hidden items counter ((1) in the screenshot) allows you to see the number of currently hidden sections and blocks within the page layout.

The list of hidden items can be hidden and revealed using the Hide/Show links.

The available controls depend on the type of section.

For sections whose configuration is managed outside of Storefront Builder (for example, Primary menu or Featured products), a shortcut icon (square-with-arrow) is displayed. Clicking this icon opens the corresponding page in the X-Cart Admin area, where you can access the section's detailed settings.

Examples:

For sections that are configured directly within Storefront Builder (such as Announcement Bar and any sections added via Add section), management options are available from the three-dot menu. Click the menu to access the available actions and settings for the selected section.

Some sections in the left sidebar may include an information icon (an "i" in a circle).

This icon provides additional details about how the respective section works.

One example is the Sale section, which is powered by the Sale add-on.

The Storefront Builder allows you to add new content blocks (sections) to your page layout using the Add section button in the Central column.

Each section type (e.g., Banner, Slideshow, Gallery) comes with its own set of settings and can be customized individually.

For a step-by-step guide on adding sections, configuring their settings, and managing them, see Adding and managing sections in the Storefront Builder (5.6.x).

When you switch from Layout settings to Theme settings, the left sidebar displays theme-related configuration settings instead of page structure.

The settings allow you to control:

These settings affect the overall appearance of the active design theme.

Changes made here are also reflected in the preview area in real time.

The Logo section allows you to configure the store logo separately for desktop and mobile views.

You can upload and manage:

Each version can be configured independently to ensure optimal display across devices.

For both desktop and mobile logos, you can:

Changes are immediately reflected in the preview area, allowing you to verify how the logo appears in both desktop and mobile modes.

The Fonts section allows you to control the primary font family used across your storefront.

You can select a font family from the available dropdown list (for example, "Open Sans", Helvetica, Verdana, sans-serif).

The selected font family is applied globally to your storefront theme and is instantly reflected in the preview area.

The Colors section allows you to customize the main color scheme of your storefront.

To enable manual color configuration, turn on the Use custom colors toggle.

Once enabled, you can configure your storefront color scheme.

Color changes are applied immediately in the preview area, allowing you to fine-tune the visual appearance of your store in real time.

The Custom CSS section allows you to add your own CSS rules to modify the appearance of your entire online store.

To enable custom styling:

First, turn on the Use custom CSS toggle.

Then, enter your CSS rules in the editor field provided.

Custom styles are applied globally and override default theme styling where applicable.

This option is intended for advanced customization and may require knowledge of CSS.