How to add a card slider to any theme in Shopify

In the video above, we’ll walk through three Flexi card sliders you can drop into Dawn, Horizon, or any theme. I’ll style one live (spacing, background, borders), break down how nested group blocks work, and show why BlazeJS makes these sliders lightning-fast compared to other libraries. Plus, a peek inside the code editor so you can see how the nested blocks come together.

 

Card Sliders

Card sliders are one of the most common patterns in modern e-commerce. You’ll see them everywhere from Lululemon to Nike to KOTN because they’re a great way to display content on mobile while keeping things simple and scrollable.

 

Flexi Card Sliders

Flexi includes three different card slider layouts. Each one can be dropped into your theme and fully customized using the Theme Customizer settings.

 

Styling a Card Slider

In the video example, we style a slider by adjusting:

• Spacing
• Background color
• Border color

All of these adjustments can be made directly in the theme customizer, and no code required. In addition, you can make so many more and advanced adjustments directly in the theme customizer.

 

Nested Group Blocks

Every card slider is built with nested group blocks, one of the most powerful features in Flexi.

Group blocks give you complete control over card layout.

This means the same section works in Dawn, Horizon, or any Shopify theme without issue.

 

Performance with BlazeJS

Flexi sliders use BlazeJS, a lightweight JavaScript slider package. BlazeJS is much faster and more efficient than most slider libraries, making it perfect for e-commerce where performance matters.

 

Developer Notes

For developers who want more control, the nested blocks are fully exposed in the code editor. You can see exactly how the slider is structured and extend it to fit your project’s needs.