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
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
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
.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
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
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
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
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
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.
