Slideshow

4 min read

The slideshow is the large panel that opens your home page. It holds up to five slides, each with an image and, in white over it, a label, a heading and a button. Shoppers swipe from slide to slide, or use the dots in the bottom right corner.

Two things make it more than a banner. When it’s the first section on a page, the header can sit over it, so the page opens on your image. And each slide can play a short video over its image: muted, on a loop, and only while that slide is showing.

Add the section

Online Store → Themes → Customize

In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
At the top of the theme editor, open the template you want to change, such as the home page.
In the sidebar, select Add section.
Choose Slideshow. It starts with two slides.
Select Save.

You can add it to any template, but not to the header or the footer.

Settings

Height: how tall the slides are: Small, Medium, Large (the default) or Full screen, which fills nearly the whole height of the screen. Images are cropped to fill the slide.
Content position: where the text sits on each slide: Bottom left (the default), Bottom center, Middle left or Middle center.
Overlay color: the color laid over every slide’s image, under the text.
Overlay opacity: how strongly the overlay darkens the images, from 0 to 80% (default 35%). The text and buttons on the slides are white, so check the contrast on your own images.
Auto-rotate slides: moves to the next slide on its own when there are two or more slides. It’s off by default. Shoppers get a pause button, and rotation also pauses on hover and focus. It never starts when the shopper’s device is set to reduce motion. A slide with a playing video stays up until its video ends, when that takes longer than Change every.
Change every: how long each slide stays up, from 3 to 10 seconds (default 6). Shown when Auto-rotate slides is on.

Panel

Color scheme: shows behind the image while it loads and when a slide has no image. The slide text stays white, so the default dark scheme keeps it readable. You edit color schemes in Theme settings.
Panel style: Panel is a rounded panel inside the page margin. Flush spans the full page width with square corners.
Enable full width on mobile: on mobile, the panel runs from edge to edge with square corners. Shown when Panel style is Panel.
Top padding: space between the top of the slide and its text, from 0 to 120 px. When the header sits over the slideshow, the header’s height is added, so the text stays clear of it.
Bottom padding: space between the text and the bottom of the slide, from 0 to 120 px. On mobile, both paddings are scaled down: 64 px becomes 40 px.

Blocks

Slide

Each slide is a block. The section holds up to five, and the dots show once there are two.

Image: the slide’s image. 2400 x 1600px or larger recommended. Set a focal point to keep the subject in view when the frame crops the image. Until you add an image, the slide shows a placeholder.
Video: an optional video that plays muted on a loop over the image, without sound or controls. Choose a video uploaded to Shopify, or upload one from the picker; a YouTube or Vimeo link can’t be used here. The image stays as the poster and the fallback: it shows while the video loads, and instead of the video when the shopper’s device has reduced motion or data saver on. The image’s focal point also frames the video. Without an image, the video’s preview image is used.
Label: a short line above the heading.
Heading: the slide’s heading.
Button label: the text on the slide’s button.
Button link: where the button goes. The button shows once it has a link.

How slide videos play:

Only the current slide’s video plays, and it starts from the beginning each time its slide comes up.
It pauses while the slideshow is off screen and while the browser tab is hidden.
Whenever a slide has a video, the slideshow shows a pause button, even with Auto-rotate slides off.
When the shopper’s device has reduced motion or data saver on, the image shows instead, and the video plays only once the shopper starts it with the slideshow’s play button.

Tips

Put the slideshow first on the home page, and turn on Enable header overlay in the Header section. Add a light version of your logo in Logo over images, so it reads on your images.
When the slideshow is the first section on the home page, the first slide’s heading is the page’s main heading (h1).
In the theme editor, selecting a slide’s block brings that slide into view and plays its video. Auto-rotation waits while you edit.