This guide provides a reference for settings available for different section types in the Storefront Builder.
Each section type (e.g., Banner, Gallery, Slideshow, etc.) includes its own set of configurable options that control its layout, content, and behavior.
To learn how to add and manage sections, see Adding and managing sections in the Storefront Builder.
Announcement bar
The Announcement Bar section allows you to display promotional messages or store announcements at the top of your storefront.
|
|
By default, this section is hidden. You can tell that a section is hidden by the crossed-out eye icon next to its name and by the dimmed appearance of the section name in the layout tree.
|
|
To publish an announcement, you first need to edit the section's content. Click the three-dot menu next to Announcement Bar and select Edit.
|
|
Enter the desired announcement text and configure the available settings as needed.
|
|
When you are done, save your changes and make sure the section is visible by clicking the crossed-out eye icon. Once enabled, the announcement bar will appear on the storefront.
The Announcement Bar section provides the following settings:
Text
Promo text or announcement - The announcement message displayed in the bar. Basic text formatting options are available, including bold, italic, and underline.
Alignment - Controls the alignment of the announcement text within the bar. Available options are left, center, and right alignment.
Announcement Bar Link
Allows you to specify a URL that users will be taken to when they click the announcement bar.
Settings
Allow users to dismiss the bar - Determines whether customers can hide the announcement bar on the storefront. When enabled, a close button is displayed, allowing users to dismiss the announcement.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Banner
The Banner section allows you to add a visual content block with a background image, text, and an optional button.
 |
|
This section includes the following configuration areas:
Layout
Section height — selects the section height (e.g., Standard or Small).
Content alignment — controls the alignment of the content within the section.
Background
Overlay — sets the overlay color (e.g.,
rgba(15, 22, 33, .5)).Image — sets the background image.
Custom mobile image (optional) — allows you to set a separate image for mobile devices.
Content
Header — main text displayed in the banner.
Keep it short and catchy. 25–45 characters work best.Secondary text — additional text.
Use it to add a little extra detail. 40–70 characters is a good range.
Button
Label — button text.
Use 2–4 words. Strong verbs work best (Shop, Get, Save).Link — URL for the button.
Banner Link
Banner Link — URL applied to the entire banner; makes the banner clickable.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Slideshow
The Slideshow section allows you to display multiple slides with images and content that can rotate automatically or be navigated manually.
 |
|
This section includes the following configuration areas:
Settings
Navigation arrows — enables or disables navigation arrows.
Pagination — enables or disables pagination.
Rotation effect — selects the rotation effect (e.g., Slide or Fade).
Animation speed — sets the animation speed (sec).
Auto-rotate slides — enables or disables automatic slide rotation.
Slide duration — sets the duration of each slide (sec).
Slides
Slide 1, Slide 2, ... — list of slides in the slideshow.
Add slide — adds a new slide.
Each slide has a three-dot menu with the following options:
Edit
Duplicate
Delete
You can open a slide for editing by:
clicking its name in the list, or
selecting Edit from the three-dot menu.
Editing a slide opens a separate editing screen. See Slide settings (for Slideshow).
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Slide settings (for Slideshow)
The Slide settings allow you to configure the content and appearance of an individual slide within the slideshow.
 |
|
Below is a list of settings available for each slide in a slideshow.
Layout
Content alignment — controls the alignment of the content within the slide.
Background
Overlay — sets the overlay color (e.g.,
rgba(15, 22, 33, .5)).Image — sets the background image.
Custom mobile image (optional) — allows you to set a separate image for mobile devices.
Content
Header — main text displayed in the slide.
Keep it short and catchy. 25–45 characters work best.Secondary text — additional text.
Use it to add a little extra detail. 40–70 characters is a good range.
Button
Label — button text.
Use 2–4 words. Strong verbs work best (Shop, Get, Save).Link — URL for the button.
Banner Link
Banner Link — URL applied to the slide.
Important: To apply your changes, click Save Changes before returning to the slideshow editing screen.
Gallery
The Gallery section allows you to display multiple banners in a grid layout.
 |
|
This section includes the following configuration areas:
Settings
Section height — selects the section height (e.g., Standard or Small).
Header
A text editor where you can enter and format the header text. Basic formatting options are available, including bold, italic, and underline.
Alignment setting that defines whether the header is aligned to the left, right, or center.
Banners
Banner 1, Banner 2, Banner 3, ... — list of banners in the gallery.
Each banner has the following controls:
Edit (pencil icon) — opens the banner editing screen.
Eye icon — shows or hides the banner.
You can open a banner for editing by clicking the Edit (pencil icon) next to its name. Editing a banner opens a separate editing screen. See Banner settings (for Gallery).
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Banner settings (for Gallery)
The Banner settings allow you to configure the content and appearance of an individual banner within the gallery.
 |
|
This section includes the following configuration areas:
Layout
Content alignment — controls the alignment of the content within the banner.
Background
Overlay — sets the overlay color (e.g.,
rgba(15, 22, 33, .5)).Image — sets the background image.
Content
Header — main text displayed in the banner.
Keep it short and catchy. 25–45 characters work best.Secondary text — additional text.
Use it to add a little extra detail. 40–70 characters is a good range.
Button
Label — button text.
Use 2–4 words. Strong verbs work best (Shop, Get, Save).Link — URL for the button.
Banner Link
Banner Link — URL applied to the entire banner.
Important: To apply your changes, click Save Changes before returning to the gallery editing screen.
Featured products
The Featured products section allows you to display a curated selection of products in a grid or carousel layout.
 |
|
This section includes the following configuration areas:
Layout
(Available only if the AutoMobile skin add-on is enabled. On stores without this add-on, the section always displays as a grid.)
Type — selects the display type: Carousel or Grid.
Header
A text editor where you can enter and format the header text. Basic formatting options are available, including bold, italic, and underline.
Alignment setting that defines whether the header is aligned to the left, right, or center.
Products
Add products — opens a product picker where you can select multiple products to feature.
 |
|
Note: If you see a message about a missing API key when trying to add a product, go to Settings > API in your Admin area (click the link in the message to access this section quicky), configure a key, and save your changes. This can happen if no key has been configured yet — for example, right after your store was set up. Once a key is saved, the product picker will work as expected.
Once added, products appear in a list where you can:
reorder them by dragging,
remove a product individually (✕ icon),
remove all products at once (Remove all).
 |
|
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Featured product
The Featured product section allows you to spotlight a single product — for example, a "Deal of the day" or a hero item — with its own header text.
 |
|
Unlike Featured products, this section can hold only one product at a time.
This section includes the following configuration areas:
Header
Header — a text editor for entering the section heading. Defaults to "Deal of the day". Basic formatting options are available, including bold, italic, and underline.
Alignment — controls the alignment of the header text. Available options are left, center, and right.
Products
Add product — opens a product picker where you can select a single product.
 |
|
Note: If you see a message about a missing API key when trying to add a product, go to Settings > API in your Admin area (click the link in the message to access this section quicky), configure a key, and save your changes. This can happen if no key has been configured yet — for example, right after your store was set up. Once a key is saved, the product picker will work as expected.
Once a product is added, the button changes to Replace product — selecting a new product replaces the current one; you cannot add a second product to this section.
|
|
To feature more than one product, use the Featured products section instead.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Rich text
The Rich text section is used to display a text block that can include a heading, supporting text, and a call-to-action button.
 |
|
All elements in this section (Header, Secondary text, and Button) are optional and can be shown or hidden using the visibility toggle (eye icon) next to each element.
The section includes the following configuration areas:
Layout
Content alignment — Defines how the content within the section is aligned: left, center, or right.
Content
Header — A text editor for entering the section heading. Basic formatting options are available, including bold, italic, and underline.
Secondary text — A text editor for adding supporting text displayed below the header. The same basic formatting options (bold, italic, underline) are supported.
Button
Label — Specifies the text displayed on the button. Short action-oriented labels (for example, Shop now or Learn more) are recommended.
Link — Specifies the destination URL that opens when the button is clicked.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Image with text
The Image with text section is used to display an image alongside a header, supporting text, and an optional button — useful for callouts, promotions, or feature highlights.
 |
|
This section includes the following configuration areas:
Layout
Content alignment — controls the horizontal and vertical alignment of the content within the section.
Media position — defines whether the image is placed to the left or right of the text.
Media
Image — sets the image displayed in the section.
Aspect ratio — selects the image's aspect ratio:
Auto,
Square (1:1),
Landscape (4:3),
Portrait (3:4).
Content
Header — a text editor for entering the section heading. Basic formatting options are available, including bold, italic, and underline. Can be hidden using the visibility toggle.
Secondary text — a text editor for adding supporting text displayed below the header. The same basic formatting options are supported. Can be hidden using the visibility toggle.
Button
Label — button text.
Link — URL for the button.
The entire Button group can be hidden using the visibility toggle next to its heading.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Video
The Video section is used to display a video with optional accompanying text content. It can be used for product showcases, tutorials, promotional content, or brand storytelling.
 |
|
Such elements as Header, Secondary text and Button are optional and can be shown or hidden using the visibility toggle (eye icon) next to each element.
Layout
Content alignment — Defines how the content within the section is aligned: left, center, or right.
Direction — Specifies how the media and text content are arranged:
Vertical — content is stacked
Horizontal — media and text are placed side by side
Media position — Defines the position of the video relative to the text content:
Up — the video is displayed above the text
Down — the video is displayed below the text
Media
Video URL — Specifies the URL of the video to be displayed. Currently, YouTube links are supported.
Alt text — Provides a text description of the video for screen readers, improving accessibility.
Cover image — Specifies an image displayed as a placeholder before the video is played.
Content
Header — A text editor for entering the video title or heading. Basic formatting options are available, including bold, italic, and underline.
Secondary text — A text editor for adding supporting text displayed below the header. The same basic formatting options (bold, italic, underline) are supported.
Button
Label — Specifies the text displayed on the button. Short action-oriented labels (for example, Shop now or Learn more) are recommended.
Link — Specifies the destination URL that opens when the button is clicked.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Testimonials
The Testimonials section allows you to display customer quotes or reviews to build trust with shoppers.
 |
|
This section includes the following configuration areas:
Header
Header — a text editor for entering the section heading. Defaults to "What our customers say". Basic formatting options are available, including bold, italic, underline, and text color. Can be hidden using the visibility toggle.
Alignment — controls the alignment of the header text.
By default, the section comes with two sample testimonials pre-filled with placeholder text — replace or delete them before publishing.
Testimonials
Add testimonial — adds a new testimonial to the list.
Each testimonial has a three-dot menu with the following options: Edit, Duplicate, Delete. You can also reorder testimonials by dragging and toggle an individual testimonial's visibility.
Opening a testimonial for editing shows Testimonial settings. See Testimonial settings (for Testimonials).
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Testimonial settings (for Testimonials)
An individual testimonial can be configured using the respective settings section:
 |
|
This section includes the following configuration fields:
Text — the testimonial quote. Basic formatting options are available.
Avatar — an optional customer photo. Can be shown or hidden using the visibility toggle (hidden by default).
Name — the customer's name. Can be hidden using the visibility toggle.
Caption — an optional caption below the name (e.g., a title or location). Can be hidden using the visibility toggle.
Custom HTML
The Custom HTML section allows you to add your own HTML code to the storefront — for example, third-party widget embed codes or custom markup that isn't available as a built-in section type.
 |
|
This section includes the following configuration areas:
HTML
A code editor where you can enter custom HTML.
Note: Changes made in the code editor are applied automatically as you type (with a short delay) — there is no separate "Apply" button for the HTML field itself.
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Icons with text
The Icons with text section allows you to display a row of small blocks, each combining an icon or image with a title and description — commonly used for feature highlights (e.g., "Free shipping", "24/7 support", "Easy returns").
 |
|
This section includes the following configuration areas:
Layout
Content position — Left or Central (default). Controls whether each block's icon/image sits to the side of the text (Left) or above it, centered (Central).
Media alignment — available only when Content position is set to Left; controls the vertical alignment of the icon relative to the text.
Media size — sets the icon/image display size: 32×32 (default), 64×64, or 96×96.
Section Title
Header — the section's heading. Defaults to "Our Features". Hidden by default — enable using the visibility toggle.
Description — supporting text below the header. Hidden by default — enable using the visibility toggle.
Blocks
The section comes with 4 sample blocks by default.
Add block — adds a new icon-with-text block to the section.
Each block supports: edit, duplicate, delete, reorder (drag), and toggle visibility.
Opening a block for editing allows to access its settings. See Block settings (for Icons with text).
Custom CSS
Use custom CSS — enables custom styles for this section. Note that the styles will be applied to this section only. To add custom styles to your entire online store, go to Theme settings.
Block settings (for Icons with text)
An individual block can be configured using the respective settings section:
 |
|
This section includes the following configuration fields:
Image — the icon or image for this block. Can be hidden using the visibility toggle.
Title — the block's heading text.
Description — supporting text for the block.
Block link — an optional URL that makes the entire block clickable.
Can't find answers you're looking for?
Email us at support@x-cart.com. We will be happy to help!