Carousel

Overview:

The Carousel section is designed to create an interactive slideshow experience using images or videos with customizable captions, overlays, content positioning, typography, and responsive layouts. It supports Shopify-hosted videos, desktop/mobile images, slideshow autoplay, content alignment, color schemes, and spacing controls. This section is ideal for showcasing featured promotions, brand storytelling, product campaigns, hero banners, or visual content sliders.

Blocks Configuration

Slide Block

The Slide block creates an individual carousel slide. Each slide supports videos, images, overlays, headings, descriptions, and content positioning.

Media Settings:

Setting	Description
Shopify Hosted Video	Uploads a video directly to Shopify for native playback inside the slide.
Desktop Image	Uploads the main image displayed on desktop devices.
Desktop Overlay	Adds a gradient or overlay effect over the desktop image.
Mobile Image	Uploads a separate image displayed on mobile devices.
Mobile Overlay	Adds a gradient or overlay effect over the mobile image.

Heading Settings:

Setting	Description
Heading	Defines the main heading displayed inside the slide. Supports rich text formatting such as bold and italic styling.
Heading Size	Controls heading size such as H1–H6, Large, Medium, or Small.
Heading Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Heading Case	Changes 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 used inside heading content.

Description Settings:

Setting	Description
Description	Displays supporting text below the slide heading.
Description Size	Controls text size such as Large, Medium, or Small.
Description Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Description Case	Changes text transformation style for description text.
Description Font Family	Allows switching between Default and Heading font family styles.
Description Color Style	Applies predefined color styling to description text.

Content Layout:

Setting	Description
Desktop Caption Width	Controls content width on desktop devices using percentage values.
Mobile Caption Width	Controls content width on mobile devices using percentage values.
Desktop Content Position	Controls content placement such as Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, or Bottom Right.
Mobile Content Position	Controls content placement on mobile devices.
Text Alignment (Desktop)	Sets text alignment inside slide content on desktop devices (Left, Center, or Right).
Text Alignment (Mobile)	Sets text alignment inside slide content on mobile devices (Left, Center, or Right).
Block Color Scheme	Applies a predefined color palette to individual slide content.

Section Configuration

Grid Settings:

Setting	Description
Desktop Grid Spacing	Adds spacing between slides on desktop devices.
Mobile Grid Spacing	Adds spacing between slides on mobile devices.

Slideshow Settings:

Setting	Description
Show Slideshow Arrows	Displays navigation arrows for switching between slides.
Enable Auto Play	Automatically rotates carousel slides.
Slideshow Interval	Controls autoplay delay timing between slide transitions.

Layout:

Setting	Description
Desktop Height	Controls carousel height on desktop devices such as Small, Medium, Large, or Full Height.
Mobile Height	Controls carousel height on mobile devices.
Thumbnail Size	Controls the size of slide thumbnails displayed inside the carousel.

Color Scheme:

Setting	Description
Section Color Scheme	Applies a predefined color palette to the carousel section background and content.