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:

There is also a switch that allows you to enable/disable the Labels editor.

After making any changes in the Storefront Builder, be sure to apply them permanently using the Save Changes 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:

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 includes a visibility icon (eye icon).

This allows you to experiment with layout changes without permanently deleting elements.

Some sections include an additional settings shortcut icon (the square-with-arrow icon visible in the sidebar).

This icon opens the corresponding configuration page in the X-Cart Admin area.

Examples:

Clicking the shortcut icon opens the menus & pages management page (Design → Menus & Pages) where you can edit menu structure and content.

This section is one of X-Cart's standard promotional blocks; it is powered by the Featured Products add-on. Clicking the shortcut icon opens the management section for Featured Products.

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.

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.