Slideshow with product 🔥

The Slideshow with product section let you display a dynamic, visually engaging slideshow on your homepage with a featured product for each slide. This section is perfect for showcasing promotions, new arrivals, or featured products with either image slides or video slides.

How to add a Slideshow with product to your Shopify store

How to edit a Slideshow with product section

Section settings

General settings

  • Container: Set how the image sliders to be displayed as Full width/ Fixed width.

  • Slide height: Set the height of the slides as Adapt to first image/ Small/ Medium/ Large.

  • Show controls: Enable controls (navigation and pagination) for the sliders.

  • Auto-rotate content: Slideshow will run automatically when enabled. The duration time to change slides is between 2-10 seconds.

Accessibility

Fill in the slideshow description for customers using screen readers.

Block settings

You have the option to use either image slides or video slides to create your slideshow. Both formats allow you to showcase products effectively while adding dynamic content to your homepage.

In each block, you can add:

  • An image or a video (depending on the block type)

  • A product to be featured in the slide

  • Block content: Heading, subheading, text and a button

  • A bottom heading

Best practices ✔️

Keep text readable

Ensure that the text is legible on various backgrounds. Use Image overlay opacity setting to make the text stand out.

Avoid overloading with too many slides

While it’s tempting to showcase multiple products, keep your slideshow concise. Too many slides may overwhelm visitors. Focus on your most important products or promotions and make sure each slide serves a clear purpose.

Enable preload image for faster loading

Use this option for sections that appear above the fold (i.e., sections that are immediately visible when a user lands on the page).

This can be particularly beneficial for improving your site's load time and reducing Largest contentful paint (LCP), which is a key metric for website performance and SEO.

By preloading the image, visitors will see your slideshow content almost instantly, improving the user experience, especially for those with slower internet connections.

Last updated