Carousel

The Carousel section is one of the most versatile sections in Scale Theme. It displays horizontally scrolling content with 3 radically different visual variants and 9 block types that you can mix freely. From a simple image slider to a 3D coverflow carousel, this section covers every use case.

The 3 variants

Scale Theme offers 4 presets based on 3 carousel variants. Each variant fundamentally changes the appearance and behavior of the carousel.

Standard variant

The classic carousel where multiple cards are visible simultaneously, aligned horizontally with uniform spacing.

When to use it:

Products: Display a product selection with pricing and add-to-cart buttons
Features/benefits: Showcase your brand's selling points with icons
Team: Introduce team members
Collections: Slide through collections with images

Strengths:

The most versatile and readable option
Ideal for informational content
Works well with 2 to 7 cards per view

Spotlight variant

The Spotlight variant highlights the center card, which is enlarged and fully opaque, while adjacent cards are reduced and dimmed. This creates a natural focus effect on the central element.

, fully opaque, while adjacent cards are at 85% size and 70% opacity, and distant cards at 70% size and 50% opacity. Visible depth and focus effect.)

When to use it:

Testimonials: Highlight one testimonial at a time
Key visuals: Portfolio, lookbook, creative work
Featured products: A star product in the center with alternatives on the sides
Quotes: A Quote block with a highlighted citation

Spotlight-specific settings:

Setting	Range	Default	Description
Center scale	100-150%	120%	Size of the center card
Adjacent scale	50-120%	85%	Size of the cards immediately beside the center
Distant scale	40-100%	65%	Size of cards further away
Very distant scale	30-90%	50%	Size of the furthest cards (7+ cards)
Center opacity	80-100%	100%	Opacity of the center card
Adjacent opacity	40-100%	80%	Opacity of adjacent cards
Distant opacity	20-100%	50%	Opacity of distant cards
Very distant opacity	10-90%	30%	Opacity of the furthest cards

, creating maximum contrast with the much smaller side cards.)

, and opacities are close (90%/80%), creating a more subtle and understated focus effect.)

💡For a dramatic effect, increase the center scale to 140-150% and reduce adjacent opacities to 50-60%. For a subtle effect, keep the center scale at 110-115% with opacities of 80-90%.

Coverflow variant

The Coverflow variant adds a genuine 3D effect with perspective, rotation, and depth. Side cards are rotated in 3D and recede in depth, recreating the iconic iTunes/Apple Music effect.

When to use it:

Portfolios and visual showcases
Premium products that deserve an immersive presentation
Impactful images: photography, art, fashion
Pages where you want a "wow" effect

4 Coverflow styles:

Style	Description	Ideal for
Apple	Balanced 3D effect inspired by iTunes, 45deg rotation, moderate depth	Most use cases, professional look
Dramatic	Pronounced rotation, deep perspective, strong contrast between center and edges	Maximum visual impact, landing pages
Minimal	Subtle rotation, shallow depth, smooth transition	Clean design, content that speaks for itself
Custom	All 3D parameters manually adjustable	Full control for designers

, Dramatic (pronounced), Minimal (subtle), Custom (customized) to compare differences in rotation and depth.)

Custom mode settings:

Setting	Range	Default	Description
Perspective	400-2000px	1000px	3D camera distance. Lower values = more pronounced 3D effect
Rotation angle	15-75deg	45deg	Rotation angle of side cards
Z center	0-150px	50px	How far the center card extends toward the user
Z adjacent	-200 to 0px	-50px	Depth of cards immediately beside center
Z distant	-300 to 0px	-120px	Depth of cards further away
Z very distant	-400 to 0px	-200px	Depth of the furthest cards
Center scale	100-130%	105%	Size of the center card
Adjacent opacity	40-100%	80%	Opacity of adjacent cards
Distant opacity	10-80%	50%	Opacity of distant cards
Overlap	-80 to 0px	-30px	Card overlap (negative values = more overlap)

ℹ️Coverflow mode requires a minimum of 3 cards to function. If there are fewer than 3 cards, the carousel automatically falls back to Standard mode.

Reflection effect:

Coverflow offers an optional reflection effect that displays a mirror reflection under each card, reminiscent of the classic Apple aesthetic.

Setting	Description
Reflection	On / Off -- Enables the reflection under the cards
Reflection opacity	10-60% -- Reflection intensity

The 9 block types

The Carousel section accepts 9 different block types that you can mix freely within the same carousel. Each type is optimized for a specific use case.

1. Slide (Image/video card)

The most complete block. It combines media (image or video) with optional text content.

, a subtitle, a bold title, a description paragraph, and a CTA button below the image.)

Available fields:

Field	Type	Description
Media type	Image / Video	Static image or video (hosted or YouTube/Vimeo)
Image	Image picker	The slide image
Video	Video picker	Shopify-hosted video
Video URL	URL	YouTube or Vimeo link
Media ratio	Adapt / Square / Portrait / Landscape / 16:9	Image/video proportions
Border radius	0-40px	Corner rounding of the media
Show content	On / Off	Enables text content
Content position	Below / Overlay	Text under the image or on top of it
Overlay position	9 positions	top-left to bottom-right (if overlay is active)
Subtitle	Text	Short text above the title
Title	Inline richtext	Main title with formatting
Text	Richtext	Description below the title
Author	Text	Author name (optional)
Button	Text + URL + Style	CTA with 3 button styles
Overlay	Opacity + Color	If content is in overlay mode

💡The Slide block is the most versatile. Use it for lookbooks, promotions with visuals, or visual testimonials with a background image.

2. Product (Product card)

Displays a standard Shopify product card with image, title, price, and add-to-cart button.

Available fields:

Field	Type	Description
Product	Product picker	The Shopify product to display

ℹ️The product card uses the same component as your collection pages, ensuring visual consistency across your entire store.

3. Quote (Citation)

A block optimized for quotes and testimonials with an editorial layout.

4. Collection (Collection card)

Displays a collection card with a background image and the collection name, linking to the collection page.

with the collection name overlaid on each image.)

5. Video

Embeds a video directly in a carousel slide.

with playback controls, in the carousel context with adjacent slides visible.)

6. Feature (Benefit)

A block designed to present a benefit or feature with an icon, title, and description.

, a short title ("Free Shipping", "2-Year Warranty", "Eco-Friendly", "24/7 Support") and a brief description below.)

Ideal for:

"Why choose us" sections
Competitive advantages
Product features

7. Stat (Key figure)

A block to display a key figure with a label, ideal for sections with social proof through numbers.

with labels below ("Happy Customers", "Satisfaction Rate", "Delivery Time", "Average Rating").)

Ideal for:

Company metrics
Trust-building KPIs
Data-driven social proof

8. CTA (Call-to-Action)

A block dedicated to calls to action with a punchy title and a button.

Ideal for:

Promotions and special offers
Newsletter signups
Links to landing pages

9. Image (Image only)

A simple image block without text content, for purely visual carousels.

Ideal for:

Photo galleries and lookbooks
Visual portfolios
Coverflow effect with beautiful images

Mixing block types

One of the Carousel's major strengths is the ability to mix different block types within the same carousel to create unique sections.

Suggested combinations:

Combination	Use case
Feature + Stat + CTA	"Why choose us" section
Quote + Image	Visual testimonials
Product + CTA	Product showcase with special offer
Collection + Slide	Collection presentation with editorial content
Slide + Video	Lookbook with backstage videos

Cards per view (Slides per view)

The number of simultaneously visible cards is configured separately for each device.

Device	Range	Default
Desktop	1-7	3
Tablet	1-5	2
Mobile	1-5	1

1 card per view

Ideal for: Full-width slideshow, individual testimonials, hero visuals.

2 cards per view

Ideal for: Before/after comparisons, product duos, editorial content.

3 cards per view (default)

Ideal for: Most use cases, good balance between size and density.

4 cards per view

Ideal for: Product catalogs, multiple features, dense grids.

5-7 cards per view

Ideal for: Partner logos, mini cards, very dense grids, Coverflow/Spotlight mode.

⚠️With Coverflow mode, always use an odd number of cards per view (3, 5, or 7) so the center card is perfectly centered. With an even number, the 3D effect will be less balanced.

Navigation and pagination

Setting	Options	Description
Show	On / Off	Enables navigation arrows
Position	Overlay / External / Below	Arrow placement
Icon style	Arrow / Chevron	Arrow shape
Icon size	16-32px	Arrow size
Background	Transparent / Background / Foreground / Accent 1 / Accent 2	Button background color
Icon color	Background / Foreground / Accent 1 / Accent 2	Arrow color

Pagination (dots)

Setting	Options	Description
Show	On / Off	Enables pagination dots
Position	Overlay / External	Overlaid or below the carousel
Size	8-20px	Dot size
Color	Background / Foreground / Accent 1 / Accent 2	Dot color

Carousel behavior

Setting	Options	Description
Autoplay	On / Off	Automatic scrolling
Autoplay speed	3-10s	Interval between each transition
Loop	On / Off	Returns to the start after the last slide
Infinite Loop	On / Off	Seamless infinite scrolling (not available in Coverflow)
Click navigation	On / Off	Click an adjacent slide to navigate to it
Animation type	Slide / Fade	Only available with 1 card per view

💡Autoplay is recommended for sections that users don't actively interact with (hero slider, logo banner). Disable it for interactive carousels (products, features) where users want to navigate at their own pace.

⚠️The Infinite Loop option is not available in Coverflow mode because the 3D perspective effects require a fixed reference point to calculate transformations correctly.

Layout and spacing

Setting	Range	Default	Description
Gap	0-100px	0px	Spacing between slides
Border radius	0-50px	0px	Corner rounding of each slide
Desktop alignment	Left / Center / Right	Center	Text content alignment
Mobile alignment	Left / Center / Right	Center	Alignment on mobile

The 4 preconfigured presets

When you add the Carousel section, 4 presets are available to get started quickly:

1. Spotlight

Variant: Spotlight
Width: Full width
5 slides desktop, 3 tablet, 1 mobile
Autoplay on (5s), loop on
Gap 20px, border radius 12px
Center scale 130%, adjacent 85%, distant 70%

2. Multi-Card (Standard)

Variant: Standard
Width: Normal (page width)
4 slides desktop, 2 tablet, 1 mobile
Autoplay off, loop on
Gap 25px, border radius 16px
Navigation in external position, no dots

3. Coverflow

Variant: Coverflow, Apple style
Width: Full width
5 slides desktop, 3 tablet, 1 mobile
Autoplay on (5s), loop + infinite loop
Gap 15px, border radius 12px
3D Apple-style effect

4. Product Showcase

Variant: Coverflow, Minimal style
Width: Full width
5 slides desktop, 3 tablet, 1 mobile
Autoplay on (6s), loop + infinite loop
Gap 20px, border radius 16px
Navigation in "below" position, dots in external

Configuration examples by use case

Product slider (e-commerce)

Variant: Standard
Cards per view: 4 desktop, 2 tablet, 1 mobile
Blocks: Product
Gap: 20px
Border radius: 8px
Navigation: External
Autoplay: Off (users browse at their own pace)

Customer testimonials

Variant: Spotlight
Cards per view: 3 desktop, 1 tablet, 1 mobile
Blocks: Quote
Center scale: 120%
Autoplay: On (5s)
Loop: On

Visual gallery / Lookbook

Variant: Coverflow, Apple style
Cards per view: 5 desktop, 3 tablet, 1 mobile
Blocks: Image
Reflection: On
Autoplay: On (4s)
Gap: 10px

"Why choose us" section

Variant: Standard
Cards per view: 3 desktop, 2 tablet, 1 mobile
Blocks: Mix of Feature + Stat + CTA
Gap: 30px
Border radius: 16px
Autoplay: Off

Variant: Standard
Cards per view: 6 desktop, 4 tablet, 3 mobile
Blocks: Image
Gap: 40px
Autoplay: On, Infinite Loop
Navigation: Off, Dots Off

Best practices

- The carousel only loads visible slides and preloads adjacent ones - Videos only start when they are in the viewport - Prefer optimized images (WebP format via the Shopify CDN) - Autoplay stops automatically if the user interacts with the carousel

- Keep a consistent number of slides (5-8 is ideal) - Use the same block type in a carousel for a uniform look (unless the mix is intentional) - In Coverflow mode, prefer images with a square or portrait ratio for a better 3D effect - Gap is crucial: 0px for a continuous strip, 20-30px for separated cards

- Don't add too many slides (15+): this can slow down the carousel, especially in Coverflow mode - Don't leave the carousel on fast autoplay (3s) with text content: users won't have time to read - Don't use Coverflow with 2 slides: a minimum of 3 slides is required (the section falls back to Standard automatically otherwise) - Don't mix blocks of very different heights in Standard mode: this creates uneven alignment

Next steps

Collection Carousel -- Slider specifically for collections
Reviews Carousel -- Customer review slider
Animations -- Animation effects on the carousel
Product Cards -- Customize cards in the slider

On this page

Carousel

The 3 variants

Standard variant

Spotlight variant

Coverflow variant

The 9 block types

1. Slide (Image/video card)

2. Product (Product card)

3. Quote (Citation)

4. Collection (Collection card)

5. Video

6. Feature (Benefit)

7. Stat (Key figure)

8. CTA (Call-to-Action)

9. Image (Image only)

Mixing block types

Cards per view (Slides per view)

1 card per view

2 cards per view

3 cards per view (default)

4 cards per view

5-7 cards per view

Navigation arrows

Carousel behavior

Layout and spacing

The 4 preconfigured presets

1. Spotlight

2. Multi-Card (Standard)

3. Coverflow

4. Product Showcase

Configuration examples by use case

Product slider (e-commerce)

Customer testimonials

Visual gallery / Lookbook

"Why choose us" section

Partner logo banner

Best practices

Next steps