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
|
|
Displays a sliding or static slideshow to highlight key products, promotions, or messages.
|
|
Available blocks
|
|
Used to add a single image slide with optional text and a button.
|
3. Location & Setup
- Go to “Online Store” > “Themes” > ”Customize”.
- Select where you want to place it.
- Click "Add Section".
- Search for Hero slideshow.
- Click on it to add.
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 for optimal display.
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 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 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.
- Choose the Content position.
- Adjust the Content alignment.
STEP 4: Click “Save” when done.
|
🤔 How to add a promotional overlay to your slide?
Want to your slide to have the 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 group. 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…
|
-
Find the Product config, and choose the product you want to show.
- Turn on Show product rating to display stars (optional).
|
|
Show the images & text for the overlay…
|
- Add the Image.
- Adjust the Overlay opacity.
- Enter Subheading, Heading.
- Adjust the Overlay content alignment.
|
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 Autoplay timing.
|
|
✨Make the slideshow pause when the mouse on:
|
Click on the Hero Slideshow section, under the Slide setting 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 only works if the Pagination type is None or Number bar.
|
|
✨ Change the transition effect:
|
Click on the Hero Slideshow section, under the Slide setting group, find and choose the Transition effect to be Slide, Fade, and Zoom in.
|
|
✨ Change the height of images
|
Click on the Hero Slideshow section, and:
-
For desktop 🖥️: Scroll down to Desktop layout, and choose your preferred image height in Desktop image height
-
For mobile 📱: Scroll down to Mobile layout, and choose your preferred image height in Mobile image height.
|
|
✨ Change the padding:
|
Click on the Hero Slideshow section, scroll down to the Section layout group, and you will be able to change the Top padding and Bottom padding.
|
Need help? Contact our support team at Omni Themes Support.
|
