Slideshow
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Editing templates will change all pages that use the same template. for different page layouts, or in the same template.
In the editor side panel, click (+) Add section and select Slideshow. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to edit 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
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
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
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
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
Use the Image slide block to display an image as the slide background. The Video slide displays an autoplay video (without sound) as the slide background. Add headings, text, and an optional button.
After uploading your media, 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
.mp4 or .mov
Embedded YouTube or Vimeo videos are not supported.
Video length
< 20 seconds (Recommended)
Video size
< 10MB (Recommended)
Click Video slide block to find settings
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
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
Click Image slide block to find settings
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.
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
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 / Middle / Bottom Left / Center / Right
Mobile text position
Set the position of the text content for mobile screens.
Top / Middle / Bottom Left / Center / 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
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
The section uses two color schemes. The first color scheme applies a section background color, and the overlay color scheme applies text, button, and overlay tint colors.
The section background is visible when the section has top and bottom padding or when the section width is page width or full width padded.
In the section settings, select a color scheme (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.
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 . This option doesn't change the heading's appearance.
Section colors
Section width
Section padding
Using color overlays
Learn how to change overlay colors and use gradients.
