Skip to main content
The Carousel section creates a horizontally scrollable gallery of content cards with navigation arrows and customizable layout options.

​
Schema Location

File: sections/carousel.liquid:22-355

​
Features

  • Configurable columns (1-8)
  • Mobile column control (1-2)
  • Customizable navigation icons
  • Icon background shapes
  • Full or page width layouts
  • Dynamic carousel content via _carousel-content block

​
Settings

​
Layout

​
columns
range
default:"4"
Number of visible columns on desktopRange: 1-8, step 1
​
mobile_columns
select
default:"1"
Number of columns on mobile devicesOptions:
  • 1 - One column
  • 2 - Two columns
​
section_width
select
default:"page-width"
Section container widthOptions:
  • page-width - Constrained to page width
  • full-width - Full viewport width
​
columns_gap
range
default:"8"
Horizontal spacing between carousel itemsRange: 0-100px, step 1

​
Navigation

​
icons_style
select
default:"arrow"
Navigation icon styleOptions:
  • arrow - Arrow icons
  • chevron - Chevron icons
  • arrows_large - Large arrow icons
  • chevron_large - Large chevron icons
  • none - No navigation icons
​
icons_shape
select
default:"none"
Background shape for navigation iconsOptions:
  • none - No background
  • circle - Circular background
  • square - Square background
Visible when: icons_style != 'none'

​
Appearance

​
color_scheme
color_scheme
default:"scheme-1"
Color scheme for the carousel section

​
Padding

​
padding-block-start
range
default:"0"
Top padding in pixelsRange: 0-100px, step 1
​
padding-block-end
range
default:"0"
Bottom padding in pixelsRange: 0-100px, step 1

​
Static Blocks

The Carousel section uses two static blocks:

​
Header Block (static-header)

Type: group Container for the carousel title and optional navigation controls Default Settings:
  • Content direction: Row
  • Horizontal alignment: Space-between
  • Vertical alignment: Baseline
  • Bottom padding: 16px

​
Carousel Content Block (static-carousel-content)

Type: _carousel-content Container for carousel cards. Accepts _card child blocks. Default Settings:
  • Position: Top
  • Height: Fit content
  • Inherits color scheme

​
Card Blocks

Each card in the carousel can contain:
  • image - Image block
  • text - Text content
  • button - Call-to-action button
  • video - Video content

​
Implementation Example

​
Basic Carousel Structure

{% raw %}
<div class="section-carousel spacing-style gap-style">
  {% comment %} Header with title {% endcomment %}
  {% content_for 'block', type: 'group', id: 'static-header' %}
  
  {% comment %} Carousel content {% endcomment %}
  {% content_for 'block', type: '_carousel-content', id: 'static-carousel-content' %}
</div>
{% endraw %}

​
Adding Cards to Carousel

{% raw %}
{% comment %}
  Card structure from preset at carousel.liquid:244-268
{% endcomment %}

<div class="carousel-card">
  {% content_for 'block', type: 'image', id: 'image_1' %}
  {% content_for 'block', type: 'text', id: 'heading_1', settings: {
    text: 'Artistry in Action',
    type_preset: 'h5'
  } %}
  {% content_for 'block', type: 'text', id: 'text_1', settings: {
    text: 'Bold style that is recognizable'
  } %}
</div>
{% endraw %}

​
CSS Classes

The carousel uses these CSS classes: 
.section-carousel {
  /* Main carousel container */
}

.section-resource-list__content {
  /* Content wrapper */
}

.spacing-style {
  /* Padding utilities */
}

.gap-style {
  /* Gap between elements */
}

​
Preset Configuration

The default preset includes: Section Settings:
  • Columns: 3
  • Columns gap: 12px
  • Top padding: 48px
  • Bottom padding: 48px
Default Cards: 4 cards with:
  • Image placeholder
  • H5 heading
  • Body text
Card Content:
  1. “Artistry in Action” - Bold style recognizable
  2. “Uncompromising Standards” - Expert construction
  3. “Made to Last” - Pieces better with time
  4. “Quality You Can Feel” - Authentic materials

​
Styling Variables

{% raw %}
style="
  {% render 'spacing-style', settings: section.settings %}
  {% render 'gap-style', value: 12 %}
"
{% endraw %}

​
JavaScript Integration

The carousel content is rendered through the _carousel-content block which handles:
  • Scroll behavior
  • Navigation controls
  • Touch/swipe gestures
  • Responsive breakpoints

​
Accessibility

  • Each card should have meaningful content
  • Images require alt text
  • Maintain reading order for screen readers
  • Ensure sufficient color contrast

​
Performance Tips

Optimize Card Count: Limit carousel items to improve loading performance. The preset includes 4 cards as a balanced default.
Image Sizes: Use appropriately sized images for carousel cards. Large images can impact scroll performance.

​
Common Use Cases

​
Content Showcase

Display brand values, features, or benefits with image + text cards

​
Product Features

Highlight product details with visual demonstrations

​
Testimonials

Rotating customer reviews with photos

​
Blog Previews

Recent blog posts with featured images

​
Related Sections

Collection List

Display collections in carousel format

Featured Blog Posts

Blog articles with carousel option

Product List

Products in scrollable layout

Build docs developers (and LLMs) love

Get started for freeTalk to us