How to add a card slider section to any shopify theme
Share
Introduction
Create flexible, content-rich sliders with the Flexi Card Slider — a powerful section designed to display custom cards inside a smooth, scrollable layout. Whether you’re showcasing features, collections, testimonials, or promotional content, the Card Slider gives you full control over both structure and design.
In the video above, you’ll learn how to add a card slider section to any Shopify theme using Flexi’s intuitive block system. Discover how to build reusable cards, control slider behavior, and create mobile-friendly experiences that feel native to your storefront.
Perfect for homepages, landing pages, and product-focused layouts, the Flexi Card Slider works seamlessly across all Shopify themes. From simple image-and-text cards to more advanced content layouts, this section adapts to your brand’s needs.
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 Card Slider.
Install Section
Open the Flexi app and navigate to the sections library. Search for "Card Slider" and click "Add to Theme" to install it instantly.
Add to Your Store
Go to your Shopify admin → Online Store → Themes → Customize. Click "Add section" and select "Card Slider" from the available sections.
Set Section Width
In the section settings, choose your preferred layout:
- Full width: Spans the entire page width
- Fixed width: Set a custom maximum width (320px – 1440px)
- Theme width: Use your theme’s default container width
Add Content
Click "Add block" to create individual cards. Each card can include images, headings, body text, buttons, or links — making it ideal for highly customizable content.
You can add as many cards as you need and reorder them easily using Shopify’s drag-and-drop editor.
Customize & Style
Fine-tune your card slider using Flexi’s built-in settings:
- Control slides per view on desktop and mobile
- Enable or disable arrows, pagination, and looping
- Adjust spacing, padding, and card alignment
- Customize typography, colors, and hover states
Works Seamlessly with Dawn & Horizon
Flexi sections are built for Shopify’s modern theme architecture, which means the Card Slider works seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.
Dawn Compatibility
Dawn is Shopify’s reference theme, and the Flexi Card Slider follows the same responsive layout patterns and spacing conventions used throughout Dawn.
This allows the section to inherit your theme’s typography and button styles by default, while still giving you full control over layout and presentation.
Horizon & Modern Framework Support
Horizon represents Shopify’s next-generation theme framework. The Card Slider integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.
Each Flexi section is self-contained and theme-safe, making it ideal for 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 the Card Slider without touching theme code
- Preview changes safely before publishing
- Reuse the same section across multiple themes
- Switch themes without rebuilding your content
Whether you’re using Dawn, Horizon, or a fully custom Online Store 2.0 theme, the Flexi Card Slider adapts automatically — giving you a flexible foundation for storytelling, promotions, and conversion-focused layouts.