# 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](https://en.wikipedia.org/wiki/Parallax_scrolling).
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](https://fluorescent.gitbook.io/legacy-themes-1/ira-3.0/sections/broken-reference) 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](https://en.wikipedia.org/wiki/Parallax_scrolling) 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](https://fluorescent.gitbook.io/legacy-themes-1/ira-3.0/sections/broken-reference).
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](https://fluorescent.gitbook.io/legacy-themes-1/ira-3.0/sections/broken-reference).
#### 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: