Slideshow

Slideshow is the opening of your home page: up to five full-width slides, each with an image or a video, a heading, two or three lines of text and a link. Use it for a new collection, a season or a campaign. You can also add it to any other page.

Add and order the slides

Each slide is a Slide block. Add up to five and drag them into the order you want. The text sits in a row at the bottom of the slide, over a gradient in the background color of the slide’s color scheme, so it stays readable even on a light photo.

• Each slide has its own Color scheme, used for the text, the gradient and the arrows and dots while that slide is showing. The section’s Color scheme only colors the background while images and videos load.
• Show slide numbers adds a number such as 001 next to each heading.
• A slide without a Link shows no link. Customers can still move through the slides with the arrows, by swiping, or with the keyboard.

Choose an image or a video

Media decides what fills the slide:

• Image: upload a wide photo, 2400 x 1350px recommended. Mobile image is optional and is used on screens narrower than 768px, for example a portrait crop. Write the image’s alternative text in Content > Files in your Shopify admin; the mobile image uses the alternative text of the main image.
• Video: an MP4 file uploaded to Shopify, with an optional Mobile video. It plays muted and on loop.
• YouTube or Vimeo video: paste the Video URL. It plays muted, on loop and without controls. The Image you choose is shown until the video starts, so pick one that matches the first frame.

Videos show a pause button in the corner. For visitors who prefer reduced motion, and in browsers with JavaScript turned off, videos don’t start: the cover image is shown instead. The videos are decorative, so put the message in the heading and text.

Image overlay opacity darkens or lightens the whole photo slightly. The gradient behind the text is what keeps the text readable, so you don’t need a high overlay.

Change the slide height

Slide height has three sizes. With Large, on tablets and computers the slide fills the screen, minus the announcement bar when the slideshow is the first section of the page.

When the slideshow is the first section of the page, the transparent header of the Header section can sit on top of it. A gradient at the top of each slide keeps the menu readable.

Rotate the slides automatically

Auto-rotate slides is off by default. When you turn it on, the slides move on every few seconds, as set in Change slides every, and a pause button appears with the controls. The rotation stops while a customer points at the slideshow or moves into it with the keyboard, and it never runs for visitors who prefer reduced motion.

Slideshow description names the slideshow for screen readers, for example “New arrivals”.

Show a slide or the section only between two dates

Turn on Schedule visibility on a slide to show it only between a start and an end date, for example a sale slide for a weekend. The numbering, arrows and dots count only the slides that are showing. You can also schedule the whole section with its own Schedule visibility. If no slide is showing, the section takes no space on the page. See Scheduling.

Settings

Settings: Slideshow

Setting	Type	Default	Options
Color scheme Background while images and videos load. Each slide has its own color scheme.	Color scheme	scheme-3	—
Slide height	Drop-down	Large	Small Medium Large
Use full-width text	Checkbox	On	—
Show slide numbers	Checkbox	On	—
Image overlay opacity	Slider	15%	0%–80%, step 5
Auto-rotate
Auto-rotate slides Shows a pause button. Slides don't rotate for visitors who prefer reduced motion.	Checkbox	Off	—
Change slides every	Slider	6s	4s–10s, step 1
Accessibility
Slideshow description Screen readers announce this description.	Text	Featured collections	—
Schedule
Schedule visibility	Checkbox	Off	—
Start date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when Schedule visibility is on	Text	—	—
End date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when Schedule visibility is on	Text	—	—

Blocks

Slide

Settings: Slide

Setting	Type	Default	Options
Media	Drop-down	Image	Image Video YouTube or Vimeo video
Image 2400 x 1350px recommended. With a YouTube or Vimeo video, shown until the video plays. Shown when Media is not Video	Image	—	—
Mobile image Optional. Shown on screens narrower than 768px. 1080 x 1350px recommended. Shown when Media is Image	Image	—	—
Video Plays muted and on loop. Visitors can pause it. Shown when Media is Video	Video	—	—
Mobile video Optional. Shown on screens narrower than 768px. Shown when Media is Video	Video	—	—
Video URL Plays muted and on loop, without controls. Visitors can pause it. Shown when Media is YouTube or Vimeo video	Video URL	—	—
Content
Heading	Text	Fall–winter collection	—
Text Two or three lines work best.	Multi-line text	Introduce the collection in two lines: what it is made of and why it is worth a look.	—
Link label	Text	Shop now	—
Link	Link	—	—
Color scheme Used for the text and the gradient behind it.	Color scheme	scheme-3	—
Schedule
Schedule visibility	Checkbox	Off	—
Start date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when Schedule visibility is on	Text	—	—
End date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when Schedule visibility is on	Text	—	—