Slideshow

This section is available in v10.0.0 and greater.

The slideshow section can show an image or a background video as a full width banner, with optional copy and buttons on top of it. Like the other full width banner sections, you can also choose a border shape for the section.

Settings

First section

When this section is the first one at the top of the page, make sure this box is checked. It helps with SEO and page performance in the following technical ways:

It will load the image in the first slide as loading="eager" instead of loading="lazy" and will remove any fading in of images to increase initial page load.

Slideshow height (desktop & mobile)

Chose a percentage height on these range sliders for how much of the screen that you want the image to take up in the browser window on desktop and mobile sized windows.

Show next slide every

The time in seconds that each slide remains in view.

Transition style

Choose between a traditional slide animation or a fade between slides.

Slide transition speed

The amount of time in seconds for the transition between slides will take. Note: if you have one or more background videos, and you have the transition style set to "slide", this setting will have no effect on the slide transition speed. This is due to a bug in Safari where when this setting is applied, the content on top of the slide would not transition at the same time as the background video.

Slideshow navigation

Choose between showing dot navigation at the bottom of the slideshow, arrows on the right and left side of the slideshow, or both.

Navigation color

Choose a color for the arrows and dots that will be easily seen on top of all slides.

Borders

See our documentation on Border shapes and Color underneath sections to learn more about how to use the settings in this section.

Section spacing

Adjust top and bottom padding within the section.

Add space above or below

Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.

Blocks

Every block is one slide. You can either use a video for a background, or an image. If there is both a video and an image uploaded, the video will override the image. If you use a video, it will autoplay, loop, and have no sound.

Video

Upload a video to Shopify here to show in this section. Note that these videos will automaticlly crop based on the banner height set in the section's settings, so we recommend using something that is more ambient than specific that can handle being cropped around the edges.

This section only supports uploading a video to Shopify to host and does not support a YouTube or Vimeo hosted video. This is because YouTube and Vimeo videos have a lot of extra settings that make them less ideal for a background video, the biggest being that they don't always autoplay. We chose to only allow Shopify hosted videos to give users to your website the best experience.

Image (desktop & mobile)

The following options are available for both desktop and mobile so you can use separate images for both cases if you want to. If there is no specific mobile image selected and there is a desktop image, then the desktop image will used on mobile as well.

Image (desktop and mobile)

Recommended size for this image is at least 2500px wide on desktop and 1000px on mobile and either a landscape or wide aspect ratio (e.g. 4:3 or 16:9). The image will automatically crop itself to be the full width of the screen, and the height that you specify in section settings, so just like with the video, it's good to pick and image that can still look good when it's a bit cropped. If no mobile image is added, the desktop image will be used on all screen sizes.

You can set a focal point for the image that will always keep that portion of the photo in view. For example, if you are using an image with people, put the focal point over their face so that their faces are always in view. Sometimes you might see a message in the theme editor that says the theme does not support focal points, this is not true. This message is a bug within the Shopify editor, the theme does fully support focal points whenever they are available.

Tinted overlay

Check this box if you want to add a slightly transparent overlay on top of the image. This can help make the text more easily readable.

Overlay color

Choose a color for the overlay that will sit on top of the image.

Overlay opacity

The percentage of transparency that you want the overlay to have. 0% = completely transparent. 100% = completely opaque.

Text box styles

The text box for this section is always on a transparent background for both desktop and mobile.

Text box position

Choose where you want the text box to be positioned over the image on desktop. It will automatically be positioned at full screen width on mobile, but will respect the vertical selection you make here (top, middle, or bottom).

Text box max width (desktop)

Adjust the width of text box in percentage of the width of the screen. It will automatically be 100% wide on mobile.

Adjust top of text box position (desktop or mobile)

Nudge the text box position up or down by percentage points of the height of the banner to refine it's location.

Text alignment (desktop or mobile)

Choose left, center, or right text alignment.

Font color

Choose a color for all of the text that will sit on top of the image.

Font color contrast

If there is a button block in the image banner, the button will be the font color chosen above, and the text in the button will be this color, so make sure it has a high enough contrast against the font color.

Text box content

To remove any of the below pieces of content, all you need to do is leave the text field blank. There is currently no way to reorder these, they will appear in the order that they are listed. Shopify is currently working on updates to the theme editor that could help with this in the future.

Heading

The text for the block. Heading font style will be the heading font chosen in Typography/Theme settings.

Heading size

Select the size of the text for the heading.

Subheading

The text for the block. Subheading font style will be the accent font chosen in Typography/Theme settings.

Subheading size

Select the size of the text for the heading.

Make text bold

Check this box to make the subheading text bold.

Text

The text for the block. Text will be the body font chosen in Typography/Theme settings.

Text size

Select the size of the text.

Make text bold

Check this box to make the text bold, which can be helpful for legibility on a transparent background.

Button label

The text for the button. To hide either of the buttons, leave the label for that button blank.

Button link

Add a link to the page you want the button to lead to. If it's a page outside of the store, make sure it's the full URL with "https://".

Link text

The text label for the link. Leave this blank to hide.

Link URL

The url that the link will go to.