# Slideshow

How to show several promotions or launches in one rotating banner, with image, heading, text and a button on each slide, and how the slideshow stays accessible and fast.

The Slideshow is a panel of up to six slides. Each slide has an image beside its copy: an eyebrow, a heading, text and a button. Shoppers move between slides with the Previous and Next buttons, by swiping on a phone, or with a trackpad. It's available on the home page, pages and collection pages.

A newly added Slideshow has the panel label "Now showing" and two slides. They say what to put on a slide rather than promising anything, so replace them with your own. Until you choose images, each slide shows a sample drawing.

## Layout

The panel's header strip shows your label on one side. With two or more slides it also shows the controls on the other side: a slide counter such as "01 / 03", Previous and Next, and a pause button when slides rotate on their own. On wider screens the strip stays on one line, and a long label is shortened with "…". When the panel is narrower than about 420 px, as on phones, the label gets a line of its own above the controls, so it's never cut short. If even that row is too narrow for every control, which can happen with a wide "Page margin", the counter is left out. Screen readers still hear which slide is showing.

On wide screens a slide's image takes about three fifths of the panel and the copy the rest. On screens narrower than 750 px they stack. Text always sits on the panel, never over the image, so it stays readable whatever the photo.

| Setting | Notes |
| --- | --- |
| "Panel label" | Text in the header strip, such as "Now showing". Screen readers also use it to name the slideshow. |
| "Media position" | "Left" or "Right" on wide screens. On phones, "Left" puts the image above the copy and "Right" puts the copy first. The order screen readers and keyboards follow matches what's on screen. |
| "Image ratio" | "Wide 16:9" (the default), "Standard 4:3", "Square 1:1", or "Adapt to first image", which uses the first slide's image shape, or 16:9 if it has no image. Every slide uses the same shape. Other images are cropped to fill it, keeping the focal point you set on the image in Shopify admin. |

## Slides

Add up to six **Slide** blocks. Each part shows only when you fill it in.

| Setting | Notes |
| --- | --- |
| "Image" | Use one at least 1600 px wide. The image's alt text from Shopify admin is read to screen reader users; without one, the slide's heading is used. |
| "Eyebrow" | A short line above the heading. |
| "Heading" | The slide's heading. Keep it to one idea: a slide is read in seconds. |
| "Text" | Rich text under the heading. |
| "Button label" | The slide's button. Leave it empty for no button. |
| "Link" | Appears once the button has a label. If you leave it empty, the button goes to your all-products collection. |

With one slide, the section is a single panel with no controls.

## Rotating slides

"Rotate slides automatically" is off by default. Turn it on to move to the next slide every 5 to 10 seconds ("Change slides every", 7 by default), wrapping from the last slide to the first.

When slides rotate:

* A pause button is the first control in the strip. Shoppers can stop the rotation and start it again.
* Rotation holds while a mouse pointer is over the slideshow, while the browser tab is in the background, and while less than half of the slideshow is on screen, and carries on afterwards.
* Rotation stops, until the shopper presses play, as soon as they press Previous or Next, tab into the slideshow with the keyboard (the pause button included), use a link in it, or swipe it.
* Slides never rotate for visitors who have asked their device to reduce motion. They see a play button and can still choose to start it.

## Accessibility

* Screen readers announce the slideshow as a carousel named by its panel label, and each slide as "1 of 3" and so on.
* Only the slide on screen can be reached with the keyboard or read by a screen reader. Keyboard users tab through the pause button, Previous, Next and then the slide's own button.
* After a press of Previous or Next, screen readers hear "Slide 2 of 3" and the slide's heading once. Rotation is never announced.
* Moving between slides doesn't change the height of the page.
* For visitors who prefer reduced motion, Previous and Next jump straight to the slide without scrolling.
* Without JavaScript, the slides are a row shoppers can swipe or scroll, with no controls and no rotation.

## Use a Hero or a Slideshow first

The Hero always shows the home page's main heading. When a Slideshow is the first section on the home page, it adds the main heading itself: your shop's name, hidden from view but read by screen readers and search engines. Use either a Hero or a leading Slideshow on the home page, not both, so the page has one main heading. A Slideshow further down the page doesn't add one.

On a collection page or a page, add the Slideshow below the main section. Above it, the slides' headings would come before the page's own title, its main heading, and a slideshow is tall enough to push the title and the products below the first screen.

## Performance

When the Slideshow is the first section on the page, the first slide's image loads at once and with high priority, as the Hero's image does. Later slides' images load when needed, and the next slide's image loads early so Next never shows an empty frame. Further down the page, every slide loads as the shopper scrolls.

The slideshow's script is small and runs only on pages that show a slideshow.

## Recipes

### Launch week on the home page

* Home page › remove the Hero, then Add section: Slideshow, and drag it to the top
* Slide 1: the launch product's photo, "Heading": the product name, "Button label": "See it", "Link": the product
* Slide 2: a photo of what it pairs with, "Link": that collection
* Leave "Rotate slides automatically" off, so shoppers move on when they're ready

### Promotions under a collection

* Collection template › Add section (below Collection): Slideshow › "Panel label": "This week"
* One slide per promotion, each with a button to its collection
* For promotions shoppers should see before any products, build a landing page instead: Pages › Create template, add a Slideshow first, and link each slide to its collection

## See also

* [Hero](hero.md): a single banner with stats and a featured product
* [Home page](home-page.md): where the Slideshow fits
* [Sections reference](../reference/sections.md#slideshow): every Slideshow setting