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
Steps
In the theme editor (Customize), click Add section.
Locate Slideshow with product.
Make necessary changes.
Save.
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
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