Slideshow

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.

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:

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.