How to add a product slider to any Shopify theme

Introduction

Showcase your products in a more engaging, interactive way with the Flexi Product Slider — a dynamic section designed to display multiple products inside a smooth, scrollable carousel. Instead of static grids or long product lists, a product slider allows customers to browse featured items quickly without leaving the page.

In the video above, you’ll learn how to add a product slider to any Shopify theme using Flexi’s intuitive block-based system. Discover how to select products, control slider behavior, and create a mobile-first experience that encourages exploration and conversion.

Perfect for homepages, collection pages, and promotional layouts, the Flexi Product Slider integrates seamlessly with any Shopify theme. Whether you’re highlighting bestsellers, new arrivals, or curated picks, this section gives you full control over layout and presentation.

Setup Instructions

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to unlock access to all Flexi sections, including the Product Slider.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Product Slider" and click "Add to Theme" to install it instantly.

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Navigate to the page where you want to display products, click "Add section", and select "Product Slider" from the available sections.

Set Section Width

In the section settings, choose how the product slider should be displayed:

• Full width: Create an immersive, edge-to-edge slider experience
• Fixed width: Set a custom maximum width (320px – 1440px)
• Theme width: Match your theme’s default content container

Add Content

Click "Add block" to select products for the slider. Each block can reference a product and display elements such as images, titles, pricing, badges, and call-to-action buttons.

This allows you to feature products anywhere — on homepages, landing pages, blog content, or promotional sections — without duplicating templates.

Customize & Style

Customize your product slider using Flexi’s built-in settings:

• Control slides per view on desktop and mobile
• Enable or disable arrows, pagination, and auto-play
• Adjust spacing, alignment, and card layouts
• Match typography, buttons, and colors to your brand

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means the Product Slider works seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.

Dawn Compatibility

Dawn is Shopify’s reference theme, and the Flexi Product Slider follows the same responsive grid patterns, spacing conventions, and accessibility best practices used throughout Dawn.

This ensures product cards inherit your theme’s typography, buttons, and pricing styles by default, while still allowing advanced layout control through Flexi’s settings.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Product Slider integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.

Because each Flexi section is self-contained and theme-safe, you can confidently add product sliders to modern and highly customized storefronts.

Theme-Safe by Design

Every Flexi section is scoped, isolated, and performance-optimized. This means you can:

• Add or remove product sliders without editing theme code
• Preview changes safely before publishing
• Reuse the same product slider across pages and themes
• Switch themes without rebuilding product layouts

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s Product Slider adapts automatically — helping you showcase products in a visually engaging way while maintaining performance and consistency.