Carousel
Overview:
The Carousel Section is a customizable slideshow component that allows store owners to display images, promotional banners, or brand messaging in a dynamic, interactive format. It supports autoplay, navigation arrows, pagination, and content positioning options.
Section Configuration:
General Settings
| Setting | Description |
|---|---|
| Desktop Height | Defines the height of the carousel on desktop devices. Options: Small, Medium, Full Window Height. |
| Mobile Height | Defines the height of the carousel on mobile devices. Options: Small, Medium, Full Window Height. |
| Color Scheme | Applies a predefined color scheme to the section. |
| Autoplay | Enables automatic slide transitions. |
| Slide Type | Sets the transition style: Fade (smooth transition) or Slide (traditional sliding effect). |
| Show Navigation Arrows | Displays next/previous arrows for manual navigation. |
| Show Pagination Dots | Enables pagination indicators for slides. |
| Slide Change Interval | Controls how often slides switch (2–9 seconds). |
Blocks Configuration:
Block Settings (Slides)
Each slide in the carousel can be customized with images, text, and buttons.
Slide Content Settings
| Setting | Description |
|---|---|
| Image | Uploads an image for the slide. |
| Background Overlay | Adds a color overlay over the image for better text visibility. |
| Caption Text | Short text displayed above the heading. |
| Caption Size | Adjusts the caption text size (Small, Medium, Large). |
| Caption Font Weight | Adjusts the caption font weight (Bold, Medium, Normal). |
| Heading | Main heading text for the slide. |
| Heading Size | Defines the heading size (H1, H2, H3, H4). |
| Heading Font Weight | Adjusts the heading font weight (Bold, Semi-Bold, Medium, Normal). |
| Description Text | A short paragraph describing the slide content. |
| Description Text Size | Adjusts the description text size (Small, Medium, Large, X-Large). |
| Description Font Weight | Adjusts the description font weight (Bold, Medium, Normal, Light). |
Slide Layout & Positioning
| Setting | Description |
|---|---|
| Enable Container | Wraps slide content in a container for better alignment. |
| Max Content Width | Adjusts the maximum width of the text and buttons (50–100%). |
| Content Position | Sets the position of the text inside the slide: Top Left, Top Right, Center, Bottom Left, Bottom Right. |
| Text Alignment (Desktop) | Aligns the text on larger screens (Left, Center, Right). |
| Text Alignment (Mobile) | Aligns the text on mobile devices (Left, Center, Right). |
| Slide Color Scheme | Applies a specific color scheme to the slide. |
Buttons
Each slide can have up to two buttons with custom labels and links.
| Setting | Description |
|---|---|
| First Button Label | Text displayed on the first button. |
| First Button Link | URL the first button links to. |
| Open First Button in New Tab | Option to open the link in a new window. |
| Second Button Label | Text displayed on the second button. |
| Second Button Link | URL the second button links to. |
| Open Second Button in New Tab | Option to open the link in a new window. |