Banner slideshow
Overview:
The Banner Slideshow section is designed to create dynamic hero banners with multiple rotating slides. It supports headings, descriptions, review bars, point lists, call-to-action buttons, slideshow controls, autoplay settings, and color schemes. This section is ideal for showcasing promotions, featured collections, brand messaging, product highlights, or conversion-focused hero banners.
Blocks Configuration
Slide Block:
The Slide block creates an individual banner slide inside the slideshow. Multiple slides can be added to rotate automatically or manually.
Review Bar Block:
The Review Bar block displays trust indicators, ratings, customer counts, and credibility messaging above the slide content.
Content Settings:
| Setting | Description |
|---|---|
| Review Text | Defines the review bar content using rating icons, profile icons, trust icons, and dynamic placeholders. |
| Rating Value | Displays the customer rating score such as 5.0. |
| Rating Color | Controls the color of the rating stars or icons. |
Typography:
| Setting | Description |
|---|---|
| Text Size | Controls the size of the review bar text. |
| Text Weight | Adjusts the font thickness of the review bar text. |
| Text Case | Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Font Family | Allows switching between default and heading font family styles. |
Spacing:
| Setting | Description |
|---|---|
| Bottom Margin (Desktop) | Adds spacing below the review bar on desktop devices. |
| Bottom Margin (Mobile) | Adds spacing below the review bar on mobile devices. |
Heading Block:
The Heading block displays the main hero heading inside each slide.
| Setting | Description |
|---|---|
| Heading Content | Defines the primary heading displayed on the slide. |
| Heading Size | Controls the size of the heading text. |
| Heading Weight | Adjusts the font thickness of the heading text. |
| Heading Case | Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Heading Tag | Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family | Allows switching between default and body font family styles. |
| Heading Color Style | Applies predefined color styling to the heading text. |
| Heading Link Style | Controls styling behavior of links inside the heading content. |
| Enable Heading Gradient | Enables gradient styling for slide headings. |
Spacing:
| Setting | Description |
|---|---|
| Bottom Margin (Desktop) | Adds spacing below the heading block on desktop devices. |
| Bottom Margin (Mobile) | Adds spacing below the heading block on mobile devices. |
Description Block:
The Description block displays supporting text below the slide heading.
| Setting | Description |
|---|---|
| Description Content | Displays supporting messaging or promotional text. |
| Description Size | Controls the size of description text. |
| Description Weight | Adjusts the font thickness of description text. |
| Description Case | Changes the text transformation style for description text. |
| Description Font Family | Allows switching between default and heading font family styles. |
Spacing:
| Setting | Description |
|---|---|
| Bottom Margin (Desktop) | Adds spacing below the description block on desktop devices. |
| Bottom Margin (Mobile) | Adds spacing below the description block on mobile devices. |
Points List Block:
The Points List block displays feature highlights or benefits inside each slide.
Point Item Block:
| Setting | Description |
|---|---|
| Point Text | Defines an individual feature or benefit item displayed inside the list. |
Example use cases:
- Fast shipping
- Premium quality materials
- Trusted by thousands of customers
Buttons Block:
The Buttons block displays one or two call-to-action buttons inside the slide.
First Button:
| Setting | Description |
|---|---|
| First Button Label | Defines the text displayed on the primary button. |
| First Button Style | Controls the visual appearance such as Primary or Secondary style. |
| First Button Case | Changes the text transformation style for the first button. |
Second Button:
| Setting | Description |
|---|---|
| Second Button Label | Defines the text displayed on the secondary button. |
| Second Button Style | Controls the visual appearance of the secondary button. |
| Second Button Case | Changes the text transformation style for the second button. |
Section Configuration
Slideshow Settings:
| Setting | Description |
|---|---|
| Show Slideshow Arrows | Displays navigation arrows for switching between slides. |
| Enable Auto Play | Automatically rotates slideshow banners. |
| Slideshow Interval | Controls the autoplay delay timing between slides. |
Preset Configuration
The default preset of the Banner Slideshow section includes:
- 3 pre-added slides
- Review bar with ratings and trust messaging
- Hero heading and description blocks
- Feature point list section
- Dual call-to-action buttons
- Ready-to-use promotional slideshow layout