Carousel
Overview
A full-width slideshow of banner slides, each with a video or image background, overlays, optional logo, and a content stack (tagline, heading, description, button). An optional header bar above the carousel can display a logo and description text. Section settings control the header bar, slideshow navigation, slide height, container layout, and horizontal spacing.
Slide Block Configuration
| Setting |
Description |
| Video |
Shopify-hosted video used as the slide background. |
| Image |
Desktop background image. |
| Overlay |
Color or gradient overlay on the desktop background. Defaults to a bottom-darkening black gradient. |
| Mobile Image |
Alternative background image for mobile. |
| Mobile Overlay |
Overlay applied to the mobile background. Defaults to the same gradient. |
| Logo |
Optional logo image displayed in the slide content area. |
| Logo Size |
Logo width. Range: 30–300 px, default 120 px. |
Content Settings
Arrow Tagline
| Setting |
Description |
| Arrow Button Tagline |
Short text shown alongside the carousel navigation arrow for this slide. Default: "Add button tagline". |
Backdrop Text
| Setting |
Description |
| Backdrop Text |
Large decorative text rendered behind the slide content stack. |
| Backdrop Text Color |
Color of the backdrop text. Default: white (#ffffff ). |
Tagline
| Setting |
Description |
| Tagline |
Short text above or below the heading. Default: "Add a tagline". |
| Tagline Size |
Large, Medium, or Small. Default: Medium. |
| Tagline Weight |
Thin (100) to Black (900). Default: Normal (400). |
| Tagline Case |
None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. |
| Tagline Font Family |
Default or Heading font. |
| Tagline Color Style |
Default, Heading, or Body color preset. Default: Heading. |
| Tagline Position |
Whether tagline appears First or Second relative to the heading. Default: First. |
| Tagline Bottom Margin – Desktop |
Spacing below tagline on desktop. Range: 0–100 px, default 15 px. |
| Tagline Bottom Margin – Mobile |
Spacing below tagline on mobile. Range: 0–100 px, default 15 px. |
Heading
| Setting |
Description |
| Heading |
Main slide heading. Supports inline rich text. Default: "Banner". |
| Heading Size |
H1–H6 or Large, Medium, Small. Default: H1. |
| Heading Tag |
Semantic HTML heading level (H1–H6). Default: H2. |
| Heading Weight |
Thin (100) to Black (900). Default: Bold (700). |
| Heading Case |
None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
| Heading Font Family |
Default or Body font. |
| Heading Color Style |
Default or Body color preset. |
| Heading Link Style |
Default or Link style when heading contains a hyperlink. |
| Heading Bottom Margin – Desktop |
Spacing below heading on desktop. Range: 0–100 px, default 15 px. |
| Heading Bottom Margin – Mobile |
Spacing below heading on mobile. Range: 0–100 px, default 15 px. |
| Setting |
Description |
| Button Label |
Button text. Default: "Button label". |
| Button Link |
URL the button navigates to. |
| Button Type |
Primary, Secondary, Styled, or Link (underlined). Default: Styled. |
| Button Case |
None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
| Open in New Tab |
Opens the button link in a new tab. Disabled by default. |
| Button Position |
Stacked (own line) or Inline (beside adjacent content). Default: Stacked. |
Slide Layout Settings
| Setting |
Description |
| Desktop Content Alignment |
Vertical position of content within the slide: Top, Middle, or Bottom. Default: Middle. |
| Mobile Content Alignment |
Vertical position of content on mobile: Top, Middle, or Bottom. Default: Middle. |
| Container Layout |
Content area layout within the slide: Contained Content or Container Fluid. Default: Contained Content. |
| Container Size |
Max content width as a percentage of slide width. Range: 30–100%, default 100%. Visible only when Container Layout is Contained Content. |
| Desktop Caption Size |
Max caption width on desktop. Range: 20–100%, default 100%. |
| Mobile Caption Size |
Max caption width on mobile. Range: 20–100%, default 100%. |
| Desktop Content Group Alignment |
Horizontal alignment of the content group: Left, Center, or Right. Default: Center. |
| Mobile Content Group Alignment |
Horizontal alignment of the content group on mobile: Left, Center, or Right. Default: Center. |
| Desktop Text Alignment |
Text alignment of all slide content on desktop. Default: Center. |
| Mobile Text Alignment |
Text alignment of all slide content on mobile. Default: Center. |
| Color Scheme |
Shopify color scheme applied to the slide. Default: Scheme 3. |
Section Configuration
| Setting |
Description |
| Enable Header Overlay |
Merges header content into the banner area instead of showing a separate bar. When active, all standard header bar settings are hidden. Disabled by default. |
| Show Header Bar |
Displays a header bar above the carousel. Visible only when Header Overlay is disabled. Enabled by default. |
| Header Logo |
Logo image shown in the header bar. Visible when header bar is active. |
| Header Logo Size |
Header logo width. Range: 30–400 px, default 120 px. Visible when header bar is active. |
| Description |
Inline rich-text content shown in the header bar. Default: "Discover our latest promotions and featured collections". Visible when header bar is active. |
| Text Size |
Header bar description size: Large, Medium, or Small. Default: Medium. |
| Text Weight |
Header bar description weight: Thin (100) to Black (900). Default: Normal (400). |
| Text Case |
Header bar description casing: None, Uppercase, Capitalize, or Lowercase. Default: None. |
| Text Font Family |
Header bar description font: Default or Heading. |
| Text Color Style |
Header bar description color preset: Default or Heading. |
Slideshow Settings
| Setting |
Description |
| Show Arrows |
Enables navigation arrows. Enabled by default. |
| Arrows Position |
Arrow placement: Overlay (on the banner) or Inline (outside it). Available when arrows are on and header bar is hidden. Default: Overlay. |
| Arrow Button Type |
Visual style of arrow buttons: Primary, Secondary, or Link. Available when arrows are enabled. Default: Primary. |
| Show Slide Heading |
Displays the active slide's heading alongside the navigation arrows in the header bar. Available when arrows, header bar, and no overlay are all active. Enabled by default. |
| Autoplay |
Auto-advances through slides. Disabled by default. |
| Slide Change Interval |
Delay between automatic transitions. Range: 2000–9000 ms, default 5000 ms. |
Layout Settings
| Setting |
Description |
| Desktop Height |
Section height on desktop: Small (40vh), Medium (60vh), Large (80vh), or Full (100vh). Default: Large (80vh). |
| Mobile Height |
Section height on mobile: Small (40vh), Medium (60vh), Large (80vh), or Full (100vh). Default: Large (80vh). |
| Container Layout |
Section horizontal layout: Page Width, Contained Content, or Container Fluid. Visible when header bar is active. Default: Container Fluid. |
| Border Style |
Section border: None, Top, Bottom, or Top & Bottom. Visible when header bar is active. Default: None. |
| Container Size |
Max container width as a percentage of page width. Range: 50–100%, default 100%. Visible when header bar is active. |
| Color Scheme |
Shopify color scheme applied to the section. Default: Scheme 1. |
Inner Spacing
Horizontal padding only. Visible when the header bar is active. This section has no top, bottom, or outer spacing controls.
| Setting |
Description |
| Desktop Left Padding |
Internal left spacing on desktop. Default 75 px. |
| Desktop Right Padding |
Internal right spacing on desktop. Default 75 px. |
| Mobile Left Padding |
Internal left spacing on mobile. Default 15 px. |
| Mobile Right Padding |
Internal right spacing on mobile. Default 15 px. |