Hero slideshow
Showcase your big beatiful banner images either in a slideshow but also as a single banner
The Hero slideshow is one of the most important sections of your Shopify store, as it’s typically the first thing customers see when they land on your homepage.
This section is fully integrated into our premium theme and looks especially impressive when used with the transparent header option, as shown in the screenshot below.
The Hero slideshow allows you to:
Display multiple slides, each with an image or video
Use a single slide as a static hero banner (when only one slide is used, all slideshow controls—such as previous/next buttons and dot indicators—are automatically hidden)
Once set up, the section handles all layout and transitions for you. All you need to do is provide high-quality, large visuals, and the Hero slideshow will take care of the rest.
Section settings
As expected, the Hero slideshow offers a wide range of settings to help you customize it exactly to your store’s needs. Below is an overview of the available options found in the main section settings.
Color scheme In most cases, you won’t need to change this setting—the default color scheme works well. However, it can be useful if you disable the Full width option and want the section to better match the surrounding content.
Show controls Shows or hides the previous/next navigation buttons. These controls are automatically hidden when only one slide (block) is present.
Controls style Choose the visual style of the navigation controls. Available options are:
Minimal
Outline
Inverted
Accent
Pagination Controls the pagination displayed at the bottom center of the slideshow. Options include:
Dots
Fraction
None (to hide pagination completely)
Like the controls, pagination is automatically hidden when only one slide is used.
Speed Defines the transition duration between slides in milliseconds. Higher values result in slower, smoother transitions.
Autoplay Controls whether slides change automatically. Set this value to 0 to disable autoplay.
Zoom effect Enables a subtle zoom-in effect on images during slide transitions.
Full width When enabled, the slideshow spans the full width of the viewport. Disable this option if you prefer the slideshow to align with the page container instead.
Full height Enables a full-height hero experience for the slideshow. When active, an animated scroll indicator (mouse icon) appears at the bottom center to suggest scrolling for more content.
Mobile height Set a fixed height for the slideshow on mobile devices. This is especially useful when slides use images with different proportions. Leave empty to automatically adapt to the image height.
Desktop height Set a fixed height for the slideshow on desktop screens. This helps maintain a consistent layout when using images with varying proportions. Leave empty to adapt to the image height.
Label A short, descriptive label used for accessibility purposes. This label is not visible on the slideshow itself.
Block settings
In addition to the main section settings, each slide (block) includes its own collapsible set of options. These settings allow you to fully customize the appearance and content of each individual slide.
Below is a breakdown of all available block settings.
Image
Image The main image used for the slide. You don’t need to worry about image dimensions—upload the image at the highest possible resolution, as Shopify automatically optimizes and resizes images for different devices.
Mobile image Optionally select a different image for mobile devices. If left empty, the main image will be used for both desktop and mobile.
Video
Video Select a video if you prefer to display a video instead of an image. When a video is selected, the image settings above are ignored.
Media overlay
Color Choose the overlay color applied on top of the image or video. Black is commonly used to improve text readability.
Opacity Controls the overlay opacity as a percentage. Higher values make the image or video less visible.
Blur Adds a blur effect to the background media. Set to 0 to disable blur.
Content
Position (mobile) Sets the caption position on mobile devices. Available options:
Top
Center
Bottom
Position (desktop) Sets the caption position on desktop screens. Available options:
Left
Center
Right
Bottom
Subheading A short line of text displayed above the main heading.
Heading The main slide title. Leave empty to hide the heading.
Heading size Select the heading level: H1, H2, H3, H4, H5, or H6.
Description font size Controls the font size of the description text. Available options:
SM
MD
LG
XL
Primary button
Button label Text displayed on the primary button. Leave empty to hide the button.
Button style Choose the visual style of the primary button:
Primary
Outline
Accent
Link
Button URL The link destination for the primary button.
Secondary button
Button label Text displayed on the secondary button. Leave empty to hide the button.
Button style Choose the visual style of the secondary button:
Primary
Outline
Accent
Link
Button URL The link destination for the secondary button.
Last updated