Slideshow
Section
Last updated
Section
Last updated
The Slideshow displays auto-rotating slides with images and autoplay videos (without sound). You can fine-tune how your images look, all slide headings and colors, and add a mobile-specific image for the best experience across all devices.
In the editor side panel, click (+) Add section and select Slideshow. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
By default, multiple slides will auto-rotate every 6 seconds. You can change the time between slides or disable autoplay to let visitors rotate through slides with the pagination buttons.
Click Slideshow section to find settings
| Setting | Description | Options |
|---|---|---|
Enable autoplay | When checked, slides will auto-rotate. | |
Time between slides | Set the number of seconds to show each slide before auto-rotating. | 4 - 20 Default: 6 |
Choose a fixed height to make the slideshow the exact same height on all screen sizes. Choose a relative height to have slides adapt their height to a certain percentage of the screen height.
Click Slideshow section to find settings
| Setting | Description | Options |
|---|---|---|
Desktop height | Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height). | Fixed height 250 - 750px Relative height 50 - 100% Default: 650px |
Mobile height | Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height). | Fixed height 150 - 750px Relative height 50 - 100% Default: 450px |
Change the alignment and colors of the navigation buttons for moving to the next or previous slides.
Click Slideshow section to find settings
| Setting | Description | Options |
|---|---|---|
Alignment | Position the slide navigation buttons to the left, center, or right. | Left Center Right |
Background | Change the color behind the slide pagination buttons. | |
Foreground | Change the color of the slide pagination buttons. | |
Background opacity | Use the slider to adjust the transparency of the background. Set the opacity to 0% to hide the background. If set to 100%, the background will be a solid color. | 0 - 100 Default: 50 |
The slideshow uses animations for revealing the the text and slides as they rotate.
Click Slideshow section to find settings
| Setting | Description | Options |
|---|---|---|
Enable text animation | When enabled, headings and text slide up and fade into view upon loading. | |
Slide animation | Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations. | None Fade Iris wipe |
The Video slide displays an autoplay video (without sound) as the slide background. After uploading your video, you can select the focal point of your video and add a color overlay.
For autoplay videos, make sure your video files meet the following requirements:
Video file type |
|
Video length | > 30 seconds (Recommended) |
Video size | > 10MB (Recommended) |
Click Video slide block to find settings
| Setting | Description | Options |
|---|---|---|
Shopify video | Select or upload a video that autoplays (without sound). | |
Mobile Shopify video | Select or upload an alternate video to show on mobile devices. | |
Video focal point | Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping. | Center Default Top Bottom Left Right |
Background link | Select a page or URL to make the entire image a clickable link. | |
Show overlay | Add a color tint to the image. | |
Overlay opacity | Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image). | 0-100 Default: 20 |
Use the Image slide block to display an image as the slide background. After uploading the image, add headings, text, and an optional button.
Click Image slide block to find settings
| Setting | Description | Options |
|---|---|---|
Image | Select or upload an image to display as the background of the banner. | |
Mobile image | Select or upload an alternate image to display on mobile devices. | |
Background link | Select a page or URL to make the entire image a clickable link. |
The image overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readibility.
Choose a Color scheme for the overlay and overlay text
Change the Opacity to make the overlay more or less transparent
Click Slide block to find settings
| Setting | Description | Options |
|---|---|---|
Overlay opacity | Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image). | 0-100 Default: 20 |
After adding an image or video, add headings, text, and buttons. You can adjust the text size and change the alignment of the slide content.
Click Slide block to find settings
| Setting | Description | Options |
|---|---|---|
Content width | Use the sliders to set the maximum width (in pixels) of the section content. | 200-1000 px Default: 500 |
Text position | Set the position of the text content for desktop screens. | Top left Top center Top right Middle left Middle center Default Middle right Bottom left Bottom center Bottom right |
Mobile text position | Set the position of the text content for mobile screens. | Top left Top center Top right Middle left Middle center Default Middle right Bottom left Bottom center Bottom right |
Overline | The small text above the heading. | Default: "Overline" |
Heading | The title of the slide. | Default: "Slide Heading" |
Heading size | Change the size of the heading text from small to large. | 1-8 Default: 8 |
Heading tag | Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance. | H1 - H6 |
Text | Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link. | Default: "Tell your brand's story through images" |
Text size | Adjust the size of the section text from small to large. | 1-8 Default: 3 |
Button link | The URL that you want the button to link to. | |
Button label | The text that displays on the button. | Default: Button |
Button style | Change the style of the button. | Solid Default Outline Text |
