Highlight slideshow

Featured links

1. Shopify documentation on sections and blocks
2. MDN Web Docs
3. Company XYZ documentation on the slide block
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to turn a list of features, details, or selling points into a guided slideshow. It works best when each slide focuses on one idea, supported by a short heading, concise copy, and optional media. For a broader overview of how sections and blocks work in the editor, see Shopify documentation on sections and blocks

Core settings

Slideshow settings

These settings control how the slideshow moves, how much of the next slide is visible, and how visitors navigate between slides. Start here before adjusting styling, because the animation style changes how the whole section behaves.

The default animation style supports a more carousel-like layout, including partial previews of upcoming slides. Fade shifts the section to a single-slide presentation, which is better when you want visitors to focus on one message at a time.

Fade forces a single-slide layout and removes previewed next slides. Pagination is also not shown when fade is active.

Animation speed affects how polished or energetic the section feels. Faster transitions suit short, visual slides, while slower transitions are usually easier to follow when slides include more reading.

Aspect ratio controls the shape of the slide media area. Use a fixed ratio for a cleaner, more consistent layout across slides, or leave it on Default if your media should keep its natural proportions. The separate mobile ratio is useful when the desktop crop feels too wide or too tight on smaller screens.

Autoplay can help when slides tell a quick, simple story. If slides include longer copy, keep autoplay slower or turn it off so visitors can read without feeling rushed. Pause on hover only applies on desktop, so mobile users will still rely on the delay and manual controls.

Navigation and pagination affect how clearly the slideshow communicates sequence. Navigation is often enough when slide headings or icons are distinct, while pagination is more useful when the order of slides matters.

Control position settings help you balance the interface across devices. On desktop, left or right placement changes the visual weight of the layout; on mobile, top or bottom placement mainly affects scanning and tap comfort.

Color settings

These settings override the section header colors used for the icon, heading, and supporting text above the slideshow. They are most useful when the section sits on a custom background or needs stronger contrast than the surrounding page styles provide.

Use color overrides sparingly. A simple high-contrast combination is usually easier to read than highly stylized text, especially when the slides themselves include images or video.

Tip

If you add a background image or video to the section, check header text contrast on both desktop and mobile before publishing. For general accessibility guidance, see MDN Web Docs

Supported block types

1. Slide

Slide

Each Slide block adds one slide to the sequence and contributes to the text or icon-based navigation. Learn more about the Slide block.

Use each slide for a single clear point. Short headings work best because they keep the navigation interface easy to scan.

1. Use the heading as the main takeaway.
2. Use the content field to add a short explanation, not a second headline.
3. Add an icon only when it helps visitors distinguish slides more quickly.

Imagery settings

A slide can be text-only, image-based, or video-based. If both image and video are added, video takes priority and plays when that slide becomes active.

Inactive overlay settings help reduce distraction from neighboring slides when previews are visible. Increase the overlay if adjacent slides compete too much with the active one, and reduce it if the section starts to feel too dark.

Block visibility

You can hide individual slides on desktop or mobile. This is useful when a slide is too detailed for smaller screens or when you want a shorter mobile sequence without removing the slide entirely.

Standard section settings

Header settings

Header settings let you introduce the slideshow with a caption, heading, supporting text, and optional button. This is a good place to explain what the slideshow covers and give visitors a clear next step.

The button works best as a single follow-up action, such as viewing a product or related page. Mobile button position and full-width behavior are helpful when you want the action to stay easy to tap.

Padding settings

Padding settings control the space above and below the section. Use them to separate the slideshow from nearby content, especially when the page includes other media-heavy sections.

Tighter spacing can make the section feel more connected to the surrounding layout. Larger spacing gives the slideshow more emphasis and breathing room.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the entire section. These choices can make the slideshow feel more immersive, but they also affect readability and the perceived depth of the layout.

Overlays are especially useful when the header sits over background media. If you use both background media and media inside slides, keep one layer visually quieter so the section does not feel crowded.

Separator settings

Separator settings add a line at the top or bottom of the section. This can help define the slideshow when it sits between sections with similar backgrounds.

Subtle separators usually work best. Use them as structure, not decoration.

Visibility settings

Visibility settings control whether the entire section appears on desktop, mobile, or both. This is useful when you want a different page flow on smaller screens.

If you hide the section on one device, make sure the same key message appears elsewhere so important details are not lost.

Width settings

Width settings control the overall section width and the maximum width of the content inside it. In this slideshow, width changes how spacious the media feels and how easy the navigation is to scan.

Narrower widths usually suit text-led slides, while wider layouts give images and video more impact. Check changes on the live page when possible, because editor framing can make width feel different from the final result.

Usage notes

1. Keep slides focused. Give each slide one main idea so the heading, icon, text, and media all support the same message.
2. Choose animation deliberately. Use the default style for a more visual carousel feel, and use fade when you want visitors to concentrate on one slide at a time.
3. Keep media proportions consistent. Matching aspect ratios across slides usually creates a cleaner, calmer layout.
4. Use autoplay with restraint. Turn it on only when slides are quick to understand and the manual controls remain obvious.
5. Check mobile carefully. Review cropping, control placement, and text contrast on smaller screens whenever you use custom colors, background media, or mobile-specific aspect ratios.
6. Review both viewport layouts. Desktop and mobile controls can change alignment, visibility, and how much of each slide is shown, so confirm both versions before publishing.
7. Treat defaults as a fallback. Blank or transparent colors usually preserve the surrounding styling, while explicit colors, gradients, or separate desktop and mobile media choices make the slideshow area more self-contained.