Banner slideshow
Banner slideshow :
Ideal for showcasing key products or services with a mix of images, text, and buttons. Choose auto-rotation or manual advancement. Customize settings for each slide to enhance visualization and engagement.
How to set up Banner slideshow section?
- Go to “Customize Theme.”
- At the top of the page, click on the dropdown to select the Home page template.
- From the left side menu, select "Banner slideshow"
- Customize this section using the settings shown in the following table.
Customize section settings:
| Setting | Description |
| Desktop height | Adjust the slide image height on the desktop by selecting a value from the range slider. |
| Mobile height | Adjust the slide image height on the mobile by selecting a value from the range slider. |
| Full Screen Width | Enable full-width layout for the slideshow. |
| Enable Custom Spacing | Allow custom spacing between slides. |
| Custom Gap | Define the space between slides when custom spacing is enabled. |
| Enable Section Radius | Apply rounded corners to the slideshow section. |
| Color scheme | Choose a set of colors to apply to this section. |
| Slideshow Settings | |
| Auto-play slides | Select this checkbox to enable/disable the “Auto-play slides” option in the slider. It keeps changing slides automatically on the storefront. |
| Show next/previous arrows | Enable/disable the display of next/previous arrows on the slider. Note: Arrows are visible only on desktop. |
| Slide Pagination style | Choose the style of slideshow navigation.
|
| Pagination Layout | Choose the layout of pagination: constrained, contained, or full width. |
| Change slides every | This setting works when the "Auto-play Slides" option is enabled. It provides a range of 2 to 9 seconds for changing slides. |
| Section spacing | Add space to the top or bottom of the Utility bar. Use the range slider to add between 0px and 100px of space to the top or bottom of your Utility bar. Adjust as needed for a polished look. |
Banner slideshow block settings:
- Choose "Banner Slideshow" from the left menu.
- Click the dropdown arrow next to the Banner Slideshow section.
- Select “Add Slide.”
| Settings | Description |
| First image | Select any image to showcase on the left side of the slide. Note - This image will only show on desktop. |
| Second image | Select any image to showcase on the right side of the slide. Note - This image will only show on desktop. |
| Image - content background | Choose an image to display as the background for the content container. |
| Content position | Set the position of the content container within the slide. Options include left, center (default), or right. If the position is set to the left, both images (First and Second) will shift to the right, placing the content on the left. Note - Image content banner position is always center on mobile devices. |
| Text Alignment | Specify the alignment of the text within the content container. Options include left, center (default), or right. |
| Center text on mobile | If selected, the content within the container will be center-aligned on mobile devices, regardless of the chosen text alignment (left or right). |
| Content Alignment | Choose the vertical alignment of the text within the content container. Options include Top, Middle, or bottom (default). |
| Heading | Insert the slide title and utilize the inline editor to apply formatting such as bold or italics, or to add internal/external links. |
| Heading size | The size of the heading text.
|
| Description | Display paragraph-style text in the section. |
| Badge text | Type the badge text, e.g., "New Arrival," "Hot," etc. |
| First button - label | The text displayed on the first button. |
| First button - link | The URL the first button directs to, whether internal or external. |
| Second button - label | The text displayed on the second button. |
| Second button - link | The URL the second button directs to, whether internal or external. |
| Pagination text | Text for pagination along with pagination dots. |
| Color scheme | Choose a set of colors to apply to this section. |
Block: Banner Slide
| Setting | Description |
|---|---|
| Image II | Upload the main background image for the banner slide. |
| Image III | Upload an additional background image layer. |
| Image III (Mobile) | Upload a mobile-specific version of the background image. |
| Background Overlay Opacity | Adjust the overlay opacity on the background image. |
| Remove Overlay | Remove the overlay effect from the background image. |
| Content Order | Choose the layout of image and content (left or right). |
| Text Alignment | Align the text content horizontally. |
| Mobile Text Alignment | Center the text on mobile devices. |
| Content Vertical Alignment | Set vertical alignment of the content. |
| Content Position | Set the content position horizontally (left, center, right). |
| Max Content Width | Define the maximum width of the content area. |
| Heading | Add a title or main heading to the banner. |
| Heading Size | Select the heading size. |
| Description | Add body text below the heading. |
| Badge Text | Display a badge label above the heading. |
| Button Label One | Set text for the first call-to-action button. |
| Button Link One | Link for the first button. |
| Open Link in New Window | Open the first button link in a new browser tab. |
| Button Label Two | Text for the second optional button. |
| Button Link Two | Link for the second optional button. |
| Open Link Two in New Window | Open the second button link in a new browser tab. |
| Pagination Text | Set custom text for the pagination bullet representing this slide. |
| Block Color Scheme | Choose a color scheme for the banner slide. |
Block: Slide Image
| Setting | Description |
|---|---|
| Image I | Upload the first image in the slide. |
| Image II | Upload the second image in the slide layout. |
| Image III | Upload a background image for the slide. |
| Image III (Mobile) | Upload a background image specifically for mobile devices. |
| Background Overlay Opacity | Adjust the transparency level of the overlay applied to the background image. |
| Remove Overlay | Option to disable the background image overlay. |
| Content Order | Set whether the image appears on the left or right of the content. |
| Text Alignment | Align text within the content area: left, center, or right. |
| Mobile Text Alignment | Center text alignment on mobile devices. |
| Content Vertical Alignment | Align the content to the top, middle, or bottom of the slide. |
| Content Position | Set the horizontal position of content: left, center, or right. |
| Max Content Width | Limit the maximum width of the content area. |
| Heading | Add a headline to the slide. |
| Heading Size | Choose the visual size of the heading text. |
| Description | Add supporting paragraph text below the heading. |
| Badge Text | Add a small badge or label above the heading. |
| Button Label One | Set the text for the first call-to-action button. |
| Button Link One | Add a URL for the first button. |
| Open Link in New Window | Open the first button link in a new browser tab. |
| Button Style | Choose the style (primary or secondary) of the first button. |
| Button Label Two | Set the text for the optional second button. |
| Button Link Two | Add a URL for the second button. |
| Open Link Two in New Window | Open the second button link in a new browser tab. |
| Pagination Text | Add custom text that appears in the pagination control. |
| Block Color Scheme | Apply a unique color scheme to the individual slide block. |
