User Guide

Search limit to:






Slideshow

by Admin on Apr 15, 2024

1. What is a slideshow?

A slideshow dynamically displays multiple images or content in sequence, commonly used to grab attention, highlight promotions, or tell a visual story.

To add the slideshow:

  1. Navigate to the Homepage in the Theme Editor.
  2. Under Template, click on “Add section” and choose the Slideshow section.

2. How to create a Hero Slideshow?

A hero slideshow occupies the top section of your webpage, showcasing key messages or visuals to capture attention.

✍️ Steps to Set Up a Hero Slideshow:

Step 1: Add the Slideshow section to your page.

Step 2: Enable the Use as Hero setting in the Slideshow settings.

Step 3: “Add block” > Slide to add more slide to your slideshow

Step 4: Set up each slide:

Click on a Slide block to open its settings panel, and you can:

  • Upload a high-quality Image optimized for desktop and mobile.
  • Add Headings, Subheadings, and optional descriptive text under the Content setting group.
  • Upload video under Shopify-hosted video or embed video from URL.
  • Add up to two buttons per slide, customizing labels, links, and styles.

Step 5: Click “Save”.

Note: Hero images are not lazy-loaded, meaning they load immediately. This prioritizes performance. To avoid potential slowdowns, limit your site to one hero slideshow per page.

3. 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.

✍️ Steps to Add a Media with Text Slide:

Step 1: Add a new Media with Text block to the Slideshow section.

Step 2: Upload the main Image for the slide.

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 setting group.

Step 5: Click “Save”.

4. 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.

✍️  Steps to Add a Three-Fold Slide:

Step 1:  Add a new Three-Fold Slide block to the Slideshow section.

Step 2: Upload two images for left (First image) and right side (Second image).

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”.

    5. 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.

    ✍️ Steps to Customize Animation and Pagination:

    Step 1: Click on the Slideshow section to open its settings panel

    Step 2: Adjust the setting, depending on your need:

    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:

    • None: No pagination indicators.
    • Dots: Simple dot indicators for slide navigation.
    • Bars: Bars showing slide progress.
    • Image Pagination: Displays a preview of the next slide's image (desktop only).

    Transition style

    Choose a Transition Style (Slide or Fade).

     

    Step 3: Click “Save”.

    6. 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.

    ✍️ Steps to Add Products to the Slideshow:

    Step 1: Click on a Slide block under the Slideshow section to open its settings panel.

    Step 2: Locate the Product setting section.

    Step 3: Click Select to choose a product from your catalog.

    Step 4: Optional:

    • 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 5:  Click “Save”.

    7. 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.

    ✍️ Steps to Enable the Parallax Effect:

    Step 1: Navigate to Theme Settings > Design.

    Step 2: Uncheck the Disable Parallax Effect option.

    Step 3: Click “Save”.

    Step 4: Return to the slideshow and preview the parallax effect.


    8. 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.
      ⚠️Note: When enabled, the Mobile height setting will no longer apply.
    • Disabled: Text content will overlay directly on top of the image, following the usual slideshow display style.

    ✍️ Steps to set it up:

    Step 1: In the Theme Editor, click on the Slideshow section.

    Step 2: Find the Mobile layout setting group.

    Step 3: Toggle Show content below image on or off depending on your preference.

    Step 4: Click Save.