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.
|
|
|
Used to add a slide with an image, text, and a clickable overlay for added engagement.
|
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 the Simple slide block?
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, click “Add block” and choose Simple slide.
STEP 2: Assign an image to the slide:
Click on the Simple slide 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.
- In the Image link, choose a link for navigation when clicked.
- Adjust the Overlay opacity from 0–100%.
STEP 3: Add the content to the slide:
Click on the Simple slide block, under Content group, and:
- Enter text into Subheading, Heading, and Text.
- Add buttons: label, link, and style.
- Choose the Content position.
- Adjust the Content alignment.
STEP 4: Click “Save” when done.
|
🤔 How to set up the Image Overlay Slide block?
Want to add a slide that has the overlay photos or products like the image below to your Hero slideshow? Here's how:
STEP 1: Add the block to the section
Under the Hero slideshow section, click “Add block” and choose Image overlay slide.
STEP 2: Assign the main image to the slide:
Click on the Simple slide block, under Banner media group, you can:
- In Image, click “Select” and upload your image.
- (Optional) Upload a different image for mobile in Mobile image.
- In the Image link, choose a link for navigation when clicked.
- Adjust the Overlay opacity from 0–100%.
STEP 3: Add the content to the slide:
Click on the Simple slide block, under the Content group, and:
- Enter text into Subheading, Heading, and Text.
- Add buttons: label, link, and style.
- Choose the Content position.
- Adjust the Content alignment.
STEP 4: Add the overlay groups:
You can add up to 2 overlay groups above the main image. These groups can link to a product or show an image, depending on your need, let’s change these settings:
| If you want to… |
You need to… |
|
Show the products for the overlay…
|
- Find the First product or Second product settings, and choose the product you want to show.
- Turn on Show product rating to display stars (optional).
|
|
Show the images & text for the overlay…
|
- Find the First alternative image or Second alternative image.
- Add the Image link.
- Adjust the Overlay opacity.
- Enter Subheading, Heading.
- Adjust the Overlay content alignment.
|
STEP 5: Click “Save” when done.
|
🤔 What other customization options can you give your Product Components?
|
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.
|
