1. What is Hero Slideshow?
The Hero Slideshow section is a dynamic way to showcase multiple images or slides at the top of your website, complete with customizable effects, layouts, and transitions to capture customer attention.
2. Section Components
| Section | Hero slideshow | Displays a sliding or static slideshow to highlight key products, promotions, or messages. |
|---|---|---|
| Available blocks | Slideshow | Used to add a single image slide with optional text, buttons, and promotional overlays. |
3. Location & Setup
To add and set up the Hero slideshow section:
- Open the Shopify Theme Editor (Online store > Themes > Customize).
- Decide where you want to place the new section.
- Click "Add Section".
- Select "Hero slideshow".
4. Highlight Features
- Autoplay controls: Set the autoplay interval or disable it entirely.
- Interactive navigation: Enable arrows, pagination, or hover pauses for better user control.
- Transition effects: Choose from Slide, Fade, or Zoom-in transitions.
- Responsive layouts: Adjust desktop and mobile image heights, and set content position/alignment separately for each.
5. Common Use Cases
🤔 How to set up a simple Hero slideshow?
Want to add a simple slide like the image below to your Hero slideshow? Here's how:
STEP 1: Add the block to the section
Under the Hero slideshow section, add a Slideshow block.
STEP 2: Assign an image to the slide
Click on the Slideshow block, under Banner media group, you can:
- In Image, click "Select" and upload your image.
- (Optional) Upload a different image for the mobile version in Mobile image.
- Adjust the Image overlay opacity from 0-100%.
STEP 3: Add the content to the slide
Click on the Slideshow block, under Slideshow content group, and:
- Enter text into Subheading, Heading, and Text.
- Add the buttons by entering the label and link, and choose the style.
STEP 4: Position the content
Under Desktop layout and Mobile layout, choose the content position and alignment for each - see "How to set the content position and alignment for desktop vs. mobile?" below for details.
STEP 5: Click "Save" when done.
🤔 How to set the content position and alignment for desktop vs. mobile?
Click on the Slideshow block you want to adjust.
STEP 1: Set the desktop position
Under Desktop layout:
- Desktop content position - choose from 9 positions (Top left, Top center, Top right, Center left, Center, Center right, Bottom left, Bottom center, Bottom right). Default: Center.
- Desktop content alignment - Left, Center (default), or Right.
STEP 2: Set the mobile position
Under Mobile layout:
- Mobile content position - Top, Center (default), or Bottom.
- Mobile alignment - Left, Center (default), or Right.
STEP 3: Click "Save" when done.
⚠️ Note: If your slide has a promotional overlay (see below), the overlay is automatically positioned opposite your content position - on both desktop and mobile - except when the content is centered.
🤔 How to add a promotional overlay to your slide?
Want your slide to have overlay photos or products like the image below? Here's how:
STEP 1: Open the settings
Click on the Slideshow block that you want to add a promotional overlay to.
STEP 2: Add the overlay groups
At each slideshow, you can add up to 2 overlay groups above the main image. Navigate to First promotion and Second promotion settings groups. These groups can link to a product or show an image, depending on your need:
| If you want to… | You need to… |
|
Show the products for the overlay…
|
|
|
Show the images & text for the overlay…
|
|
⚠️ Note: Promotion prioritizes showing the featured product, followed by the image.
STEP 3: Adjust the promotion layout
You can choose Content position and Overlay content alignment at Promotion layout settings.
STEP 4: Click "Save" when done.
🤔 What other customization options can you give your Hero Slideshow?
| For the whole Hero Slideshow section: | |
| ✨ Change the auto-play timing of the slideshow |
Click on the Hero Slideshow section, under the Slide setting group, and adjust the Auto-play every timing. |
| ✨ Make the slideshow pause when the mouse is on it |
Click on the Hero Slideshow section, under the Slide settings group, find and turn on the Pause on hover setting. |
| ✨ Show the left-right arrows |
Click on the Hero Slideshow section, under the Slide setting group, find and turn on the Show navigation arrows setting. ⚠️ Note: This is disabled automatically if the Pagination type is set to Image. |
| ✨ Change the transition effect |
Click on the Hero Slideshow section, under the Slide settings group, find and choose the Transition effect to be Slide, Fade, or Zoom in. |
| ✨ Change the height of image rows |
Click on the Hero Slideshow section, and:
|
| ✨ Change the section width, padding, or add a divider line |
Click on the Hero Slideshow section, scroll down to the Section layout group, and:
|
6. Change Logs
Version 2.0.0 - August 2026
- New – Mobile content position & alignment: Added Mobile content position and Mobile alignment settings under Mobile layout, so slide content can now be positioned separately for desktop and mobile instead of following the desktop setting on both.
- Changed – Section layout: Section width moved from the Desktop layout group into the Section layout group, alongside a new "Show section divider" setting.
7. Support Information
Need help? Contact our support team at Omni Themes Support
