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