Carousel
Overview:
The Carousel section displays a full-width or contained image or video slideshow, optionally featuring product cards and banner slides. It supports autoplay, various layout and height options, and custom content positioning for both desktop and mobile views.
Section Configuration:
Setting |
Description |
|---|---|
| Desktop Height | Sets the vertical height of the carousel on desktop. Options include Small, Medium, and Full Window Height. |
| Mobile Height | Sets the vertical height of the carousel on mobile. Options include Small, Medium, and Full Window Height. |
| Container Layout | Determines the section’s container style. Options include Page Width, Contained Content, and Full Width. |
| Corner Radius | Adjusts the corner rounding of the section. Options include None, Top Only, Bottom Only, or Both. |
| Color Scheme | Applies a predefined color scheme for the section background and content. |
| Autoplay | Enables automatic slide rotation. |
| Slide Type | Selects the animation style between slides: Fade or Slide. |
| Show Pagination | Displays pagination dots below the carousel for navigation. |
| Change Slides Every | Sets the time interval (2–9 seconds) between automatic slide changes. |
Blocks Configuration:
Block Type: Slide
Each Slide block displays an image or video background with optional text and a product card overlay.
Setting |
Description |
|---|---|
| Image | Uploads an image for the slide background. |
| Background Overlay | Adds a gradient or color overlay on top of the image or video. |
| Video | Optionally uploads a video to replace the image as the background. |
| Heading | Displays heading text over the background media. |
| Heading Size | Sets the HTML heading level (H5 or H6). |
| Heading Weight | Adjusts the font weight of the heading. Options range from Light to Extra Bold. |
| Product | Selects a product to display in a styled card over the background. |
| Product Description | Adds descriptive text for the selected product. |
| Enable Product Card | Displays the product card when enabled. |
| Content Position | Determines where the text and product card appear over the slide (e.g., top-left, bottom-right). |
Block Type: Banner Slide
Each Banner Slide block features a dual-column layout with two banner elements, each containing individual images, video, heading, and optional product cards.
Banner One and Banner Two Settings
Setting |
Description |
|---|---|
| Image | Uploads an image for the banner background. |
| Background Overlay | Adds a gradient or color overlay to the image. |
| Video | Replaces the image with an uploaded video background. |
| Heading | Displays heading text over the banner. |
| Heading Size | Sets the heading text size (H5 or H6). |
| Heading Weight | Controls the weight of the heading font. Options range from Light to Extra Bold. |
| Product | Displays a selected product in a card format. |
| Product Description | Adds text to describe the product card. |
| Enable Product Card | Shows the product card when enabled. |
| Content Position | Sets the placement of content within each banner (e.g., top-left, centered). |