Slideshow

The Slideshow section adds an auto-playing slideshow to your home page. It supports video slides, and it can be configured to fill the entire screen. :

Set up a slideshow on the home page

To add a slideshow:

STEPS

1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

2. Scroll down the list of home page settings until you see the Add section button.

3. Choose Slideshow from the list of sections.

   This opens the Slideshow section settings.

4. Adjust the Height and Mobile Height of your slide images between 50% to 100% of the maximum height.

5. Tweak the Overlay opacity.

   The overlay is a colored filter that is layered on top of your slides.

   The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

6. Change the color of the Overlay, Heading, Subheading, Link text and the Button background.

7. Choose the Time between slides, in seconds.

8. Check the Enable parallax checkbox to turn on a parallax scrolling effect.

   This effect makes it look like the image and text have 3d depth as customers scroll. You can see this effect in action in the video below:

Your browser does not support the video tag.Parallax scrolling animation on slideshow

10. (Optional.) Choose whether to Enable full width.

Enabling this setting removes any borders around the section, letting it fill the entire width of the screen.

11. Return to the list of Home page sections to find your new Slideshow section.

Use the drag handles to rearrange the order of your Home page sections:

12. Add some slides using the Add Slide button.

For more information about the settings for each column, see the Add slides to a slideshow section.

13. Click Save.

Settings reference

The slideshow has the following settings:

Height

Use the slider to set the height of the slide as a percentage of the maximum height.

Mobile height

Use the slider to set the height of the slide on mobile as a perecentage of the maximum height.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. An opacity of 0% is invisible and 100% is completely opaque.

Overlay

Pick the color of the overlay.

Heading

Pick the color of the heading.

Subheading

Pick the color of the subheading text.

Button background

Pick the button background color.

Button text

Pick the button text color.

Time between slides

Use the slider to choose how many seconds Ira should wait before switching slides.

Choose between 0 seconds and 10 seconds.

Enable parallax

Check this checkbox to add a parallax scrolling effect to the slideshow.

The parallax effect gives the text and image a sense of depth as the user scrolls.

Enable full width

Check this checkbox to remove the outer margins from this section, making it span the entire width of the screen.

Add a slide

To add a slide to a slideshow:

STEPS

1. Make sure you are already editing the slideshow section you want to change.

2. Use the Add Slide button to add a new slide.

3. Add an Image for the current block.

   We recommend an image that is square or landscape (wider than it is tall) with a minimum width of 2048px for optimal quality. Read our article about [Image guide][image-sizes] for Lorenza to learn more.

4. (Optional.) Add a Video link.

   Your Image is used as a fallback for the video, if you've added a video link.

   For more information about adding videos, see Add a video to a slideshow.

5. Add Mini heading text and a Heading.

   The mini heading is smaller text displayed above your heading. If you're using the slideshow to highlight many different kinds of things, you could use the mini heading to distinguish between "Products", "Collections", "Blog posts" and so on. Or, you could choose to leave it blank.

6. Add Subheading text to be displayed below the heading.

7. You can choose how wide the heading and subheading appear with the Text max width slider.

8. Add a Button text and Link to be displayed as a call to action button on the slide.

9. Choose the Text alignment for this content block.

   There are lots of options. For more information about them, see Text alignment in slideshows.

10. Return to the list of Home page sections to find your Slideshow section with the content blocks nested below.

You can change the order of the blocks by using the drag handles:

11. Repeat this process until you've added all the slides you need.

You can also use the Remove block button to remove a slide from this section entirely.

12. Click Save.

Settings reference

Each slide has the following settings:

Image

Add or upload an image for the current slide.

Video link

Paste a link to an MP4 file that should be auto-played in the slide, taking the place of the image.

For more information, see Add a video to a slideshow.

Mini heading

Add mini heading text, which is smaller text placed above the heading.

This text uses your Mini heading typography styles.

See Typography for more information.

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Text max width

Change how wide the subheading text can be at a maximum.

Button text

Add custom text for your call to action button.

We recommend keeping this between 1 and 3 words.

Button link

Choose a link that the call to action button should lead to.

Text alignment

Choose how the text inside the current slide should be aligned.

For more information about each option, see Text alignment in slideshows

Settings reference

In the Slidehow section, you can change how text is aligned in each slide.

The following Text alignment settings are available:

Top left	Top center	Top right
Middle left	Middle center	Middle right
Bottom left	Bottom center	Bottom right

In the following diagram, you can see where of these settings would place your text::

Add a video to a slideshow

The Slideshow home page section allows you to add auto-playing videos to individual slides.

Before you start setting this up, you should know a few things:

STEPS

1. You'll need your video as an MP4 video file.

2. For the best customer experience, we strongly recommend using a 20- to 30-second video that's under 10MB in size.

3. You can't use a service like YouTube or Vimeo to host this video.

Host the video file with Shopify

To use Shopify to host this video file: