Slideshow

Featured links

1. Company XYZ documentation on slideshow controls settings
2. Company XYZ documentation on the banner block
3. Company XYZ documentation on the blog post block
4. Company XYZ documentation on the image block
5. Company XYZ documentation on the product block
6. Company XYZ documentation on the rich text block
7. Company XYZ documentation on the testimonial block
8. Company XYZ documentation on the video block
9. Company XYZ documentation on headers settings
10. Company XYZ documentation on section padding settings
11. Company XYZ documentation on section backgrounds settings
12. Company XYZ documentation on separators settings
13. Company XYZ documentation on visibility settings
14. Company XYZ documentation on layout widths settings
15. Shopify documentation on sections and blocks
16. Shopify documentation on theme editor features overview

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Slideshow to build a swipeable or clickable content area with mixed block types, from simple image-led promos to multi-card featured content. It is a strong fit when you want visual variety while still controlling how many items appear at each screen size and how visitors move through the slides. For a broader overview of how sections and blocks work in the theme editor, see Shopify documentation on sections and blocks

Core settings

These settings define the basic layout before you fine-tune slideshow behavior. They control how many blocks are visible at once and how evenly content lines up across each row.

Layout and responsive behavior

Set separate column counts for desktop, tablet, and mobile to control how dense the slideshow feels on each screen size. If the tablet value is set to 0, tablet screens use the desktop column count, which is useful when you want fewer breakpoints to manage.

Use Stack on mobile when each slide needs more reading room or when mixed block types feel cramped side by side on smaller screens. This creates a simpler single-column experience.

Use Stretch content vertically to make blocks match the height of the tallest block in each row. This is especially helpful when combining text-heavy blocks with image-based ones, since it keeps the overall row looking cleaner.

Tip

If you are mixing products, articles, and rich text in the same slideshow, start with fewer columns and keep vertical stretching enabled for a more consistent layout.

Slideshow settings

Use these controls to define how visitors interact with the section. The slideshow controls reference is available in the slideshow controls settings.

Animation and transitions

Choose the animation style based on the kind of presentation you want. The default animation works best for browsing multiple visible slides, while Fade suits more focused, hero-style storytelling.

Fade forces a single-slide layout and disables preview-style behavior and pagination display.

Animation speed changes how quickly slides transition. Faster motion can feel more energetic for promotions, while slower transitions usually work better for editorial or premium visual content.

Autoplay and looping

Autoplay can make the section feel more dynamic, but it works best when each slide is quick to understand. If slides include longer copy, product details, or video, a longer autoplay delay usually gives a better experience.

Pause on hover applies on desktop only and helps visitors read or interact without the slideshow moving away. Loop slides is useful when the section should feel continuous instead of having a clear endpoint.

Navigation and pagination

Use Show navigation when visitors should have obvious manual control. This matters most for mixed-content slideshows or any layout where several cards are visible at once.

Navigation position lets you place controls above or below the content depending on how prominent you want them to feel. Below-content placement often looks cleaner for image-led layouts, while above-content placement can work well when the section also includes a heading.

Pagination is most useful when the slideshow tells a sequence or shows one main slide at a time. Fraction and progress bar styles are often easier to interpret than dynamic pagination for content-heavy slides.

Slide preview behavior

Show preview of next slides reveals part of the next card to hint that more content is available. This works best in multi-card layouts where you want to encourage browsing.

If the layout already feels tight, turning previews off can make the section feel calmer and easier to scan. This setting does not apply when using Fade animation.

Color settings

These color overrides affect the section heading area rather than the individual slide blocks. Use them when the introductory content needs to stand apart from your global color settings or from a strong background treatment.

Adjust icon, heading, and subheading colors together so the intro stays readable. If your slides already use bold color or imagery, keeping the section header colors more restrained usually creates a better balance.

Supported block types

1. Banner
2. Blog post
3. Image
4. Product
5. Rich text
6. Testimonial
7. Video

Banner

Banner blocks are the most flexible option in this section and are ideal for promotions, hero-style slides, and image-led storytelling. See the Banner block reference for block-specific settings.

Use the block background for the slide itself, then layer text, buttons, and optional foreground media on top. Banner blocks can also expand beyond their selected aspect ratio if the content needs more space.

Blog post

Blog post blocks display article cards inside the slideshow. See the Blog post block reference for details.

They work well for featured editorial content or journal highlights. If you need more visual control than a standard article card provides, use a Banner block instead.

Image

Image blocks are a simple way to add visual slides with optional captions, overlays, links, and alignment control. See the Image block reference for details.

They are useful for lookbooks, campaign imagery, logo slides, or lightweight promotions. Add captions only when they add clear context.

Product

Product blocks add shoppable product cards to the slideshow. See the Product block reference for details.

Use them for featured items, curated rows, or related picks. If you show more product details or variant controls, reduce the number of visible columns so each card remains easy to scan.

Rich text

Rich text blocks let you add message-driven slides with headings, body copy, icons, buttons, and optional block backgrounds. See the Rich text block reference for details.

They are useful for announcements, value propositions, or editorial breaks between more visual slides. Because they can include their own background media, they can feel almost banner-like while staying text-focused.

Testimonial

Testimonial blocks highlight customer quotes and can optionally link the quote to a related product. See the Testimonial block reference for details.

Keep testimonial copy fairly short for best results in a moving layout. If you add imagery or video, make sure the quote still feels like the main message.

Video

Video blocks let you place hosted or embedded video directly into the slideshow. See the Video block reference for details.

Use video sparingly in autoplaying carousels. Poster images, captions, and overlays can help the slide feel more polished before playback starts.

Caution

Avoid fast slideshow autoplay when video slides are included, since visitors need enough time to recognize and interact with them.

Standard section settings

Header settings

Use the shared header settings to introduce the slideshow with a caption, heading, supporting text, icon, and optional button. The full header guidance is available in the header settings reference.

A section header is especially helpful when the slideshow appears lower on a page or mixes several content types. Keep it concise so it frames the content without competing with the slides.

Padding settings

Use the shared padding controls to adjust spacing above and below the section content. The full padding reference is available in the section padding reference.

Increase padding when the slideshow should feel like a standalone feature. Reduce it when the section needs to sit more tightly within a denser page layout.

Section background settings

Use the shared section background controls to add color, gradients, images, overlays, or video behind the entire section. The full background reference is available in the section backgrounds reference.

These settings affect the section wrapper, not the individual slides. Strong backgrounds can add depth, but they also make contrast and spacing more important.

If individual slides already use bold imagery, overlays, or color treatments, use a quieter section background to avoid visual competition.

Separator settings

Use the shared separator controls to add a top or bottom divider line. The separator options are documented in the separators reference.

Separators can help define the slideshow when surrounding sections use similar backgrounds. Use them lightly so the page does not feel over-framed.

Visibility settings

Use the shared visibility controls to decide whether the section appears on desktop, mobile, or both. The visibility behavior is documented in the visibility settings reference.

This is useful when you want a different mobile presentation elsewhere on the page or when a complex multi-slide layout only works well on larger screens.

Width settings

Use the shared width controls to manage both the content width and the section wrapper width. The width options are documented in the layout widths reference.

Content width controls how wide the slideshow content can grow, while section width matters most when backgrounds are in use. Because the editor can limit how width changes appear, it is worth checking the live page view before finalizing layout choices. For related theme editor context, see Shopify documentation on theme editor features overview

Usage notes

1. Match columns to content. Use fewer columns when slides include text, buttons, ratings, or video so each item stays readable and easy to interact with.
2. Choose animation deliberately. Use the default animation for multi-card browsing and use Fade only when you want one focused slide at a time.
3. Keep autoplay relaxed. Longer autoplay delays work better for mixed-content slideshows, especially when slides include products, testimonials, or video.
4. Avoid competing backgrounds. If blocks already use strong imagery or overlays, keep the section background simpler for better contrast and clarity.
5. Check the live layout. Review mobile stacking, tablet column behavior, navigation placement, and width changes on the actual frontend before publishing.
6. Review block-driven changes. Adding or removing blocks can change how the whole section feels, so recheck spacing, balance, and the usefulness of navigation after editing the block list.