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.
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.
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.
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.
Can't find answers you're looking for?
Email us at support@x-cart.com. We will be happy to help!