1. What is Slideshow?
A slideshow dynamically displays multiple images or content in sequence, commonly used to grab attention, highlight promotions, or tell a visual story.
2. Section Components
| Section | Slideshow | Display multiple images, videos, or content in sequence. |
|---|---|---|
| Available blocks | Slide | Used to add a single image/video slide with optional text and button. |
| Three-fold Slide | Used to add a slide displaying the main content in the center with two supporting images on each side. | |
| Media with text | Used to add a slide displaying an image and text side by side for a clean presentation. |
3. Location & Setup
To add and set up the Slideshow section:
- Open the Shopify Theme Editor (Online store > Themes > Customize).
- Decide where you want to place the new section.
- Click "Add section".
- Select "Slideshow".
4. Highlight features
- Flexible layouts: Choose between standard Slide, Three-fold Slide, or Media with Text to fit various storytelling needs.
- Product highlights: Showcase up to two products per slide with titles, ratings, and purchase links.
- Optimized for mobile: Upload a separate video for the slide on mobile.
5. Common Use Cases
🤔 How to create a Hero Slideshow?
A hero slideshow occupies the top section of your webpage, showcasing key messages or visuals to capture attention. Here's how to set up:
STEP 1: Add the section
Add the Slideshow section.
STEP 2: Enable Hero mode
Click on the Slideshow section to open its settings panel, then enable the Use as Hero setting.
STEP 3: Add Slide blocks and set up
Under Slideshow section, add Slide block, then open its settings panel:
- Upload a high-quality Image optimized for desktop and mobile.
- Add Headings, Subheadings, and optional descriptive text under the Content setting group.
- In the Desktop/Mobile video settings group, upload separate videos for desktop and mobile displays within the slide.
- Add a link to the Image link field, so when users click on the banner, it will navigate to that link.
- Add up to two CTA buttons per slide, customizing labels, links, and styles.
STEP 4: Click "Save" to apply changes.
🤔 How to create a Media with Text slide layout?
Use this layout to highlight a product or story with text displayed separately from the image for a clean and modern look.
STEP 1: Add the block
Add a new Media with Text block to the Slideshow section. Then click on the block to open its settings panel.
STEP 2: Upload an image to the slide
Upload the main Image for the slide. (Add a link to the Image link field, so when users click on the banner, it will navigate to that link.)
STEP 3: Customize the content
- Add a Subheading, Heading, and optional text.
- Add up to two buttons with labels, links, and styles (Primary, Secondary, or Text link).
STEP 4: Set up the layout
Choose the look for your Media with text slideshow on both Desktop and Mobile under the Layout settings group.
STEP 5: Click "Save" to apply changes.
🤔 How to create a Three-fold Slide layout?
The Three-Fold Slide layout adds two images flanking the central content, perfect for a detailed story or showcasing multiple products.
STEP 1: Add the block
Add a new Three-fold Slide block to the Slideshow section. Then click on the block to open its settings panel.
STEP 2: Upload images to the slide
Upload two images for left (First image) and right side (Second image). (Add a link to the Image link field, so when users click on the banner, it will navigate to that link.)
STEP 3: Customize the content
- Add a Subheading, Heading, and optional text.
- Add up to two buttons with labels, links, and styles (Primary, Secondary, or Text link).
STEP 4: Click "Save" to apply changes.
🤔 How to add animation and pagination to your Slideshow?
Animations and pagination enhance the slideshow's user experience, making it more interactive and visually appealing. Here's how to set up:
STEP 1: Open the settings
Click on the Slideshow section to open its settings panel.
STEP 2: Adjust the settings, depending on your needs
| Setting name | Purpose |
|---|---|
| Enable auto-play | Turn on to set a slide transition time (5–10 seconds is recommended). |
| Change slides every | Adjust the duration between each slide change (from 3-10s). |
| Pause on hover | Turn on to stop autoplay when users hover over the slideshow. |
| Next/Previous Arrows | Enable to add left and right arrows to the slideshow. |
| Pagination | Choose your desired pagination style from the list:
|
| Transition style | Choose a Transition Style (Slide or Fade). |
STEP 3: Click "Save" to apply changes.
🤔 How to add products to the slideshow?
You can highlight specific products directly within the slideshow to promote best-sellers, new arrivals, or featured items. You can add up to 2 products in this slideshow.
STEP 1: Open the settings
Click on the block (Slide/Media with text/Three-fold Slide block) that you want to add products to. Then locate the Product settings section.
STEP 2: Add products to the section
At Product, click Select to choose a product from your catalog. You can choose up to 2 products to display on the slide.
STEP 3: Optional settings
- Update the Text field to introduce the product (e.g., "Check out our best-seller!").
- Enable the Show Rating option to display the product's star rating.
STEP 4: Click "Save" to apply changes.
🤔 How to show Slideshow content below the image on Mobile?
Use the Show content below image setting to control how text appears on mobile:
🧩 How it works:
- Enabled: On mobile, the image will appear first, and the text (headings, subheadings, buttons) will display below the image.
- Disabled: Text content will overlay directly on top of the image, following the usual slideshow display style.
STEP 1: Open the settings
In the Theme Editor, click on the Slideshow section > Mobile layout settings group.
STEP 2: Enable the setting
Toggle "Show content below image" on or off depending on your preference.
STEP 3: Click "Save" to apply changes.
🤔 How to add depth with a Parallax effect?
The Parallax effect creates a layered visual experience by moving the slideshow background slower than the foreground content.
To enable the effect:
STEP 1: Open the settings
Navigate to Theme Settings > Design > Animations settings group.
STEP 2: Configure the settings
In the Animations settings group, uncheck the Disable Parallax Effect option.
STEP 3: Click "Save" to apply changes.
STEP 4: Return to the slideshow and preview the parallax effect.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
