Slideshow

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.

Set up section


In the editor side panel, click (+) Add section and select Slideshow. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Set up slideshow


Autoplay slides

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 height

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

Customize pagination

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

Choose slide animation

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

Add image or video slide


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.

Cover

Using color overlays

Learn how to change overlay colors and use gradients.

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

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

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

Setting
Description

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.

Set up slide content


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

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

Section colors


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.

Change background color


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.

Last updated

Was this helpful?