How to add a how it works slider section to any Shopify theme

Introduction

Clearly explain your process with the Flexi How It Works Slider — a guided, step-by-step section designed to walk customers through how your product, service, or subscription works. Instead of long blocks of text, this slider breaks information into digestible, visual steps that are easy to understand and engaging to explore.

In the video above, you’ll learn how to add a How It Works slider to any Shopify theme using Flexi’s intuitive block system. Discover how to structure steps, control slide behavior, and create a mobile-friendly experience that builds confidence and reduces purchase friction.

Perfect for product pages, homepages, and landing pages, the Flexi How It Works Slider integrates seamlessly with any Shopify theme. Whether you’re explaining a subscription flow, ordering process, or brand story, this section helps customers understand what to expect before they buy.

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 How It Works Slider.

Install Section

Open the Flexi app and navigate to the sections library. Search for "How It Works 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 "How It Works Slider" from the available sections.

Set Section Width

In the section settings, choose your preferred layout:

• Full width: Create an immersive, step-by-step 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 create individual steps in your How It Works flow. Each slide can include a step number, headline, description, image or icon, and optional supporting content.

You can add as many steps as needed and reorder them easily using Shopify’s drag-and-drop editor.

Customize & Style

Fine-tune your How It Works slider using Flexi’s built-in settings:

• Control slides per view on desktop and mobile
• Enable or disable arrows, pagination, or auto-play
• Adjust spacing, alignment, and step indicators
• Customize typography, colors, and icon styles

Works Seamlessly with Dawn & Horizon

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

Dawn Compatibility

Dawn is Shopify’s reference theme, and the Flexi How It Works Slider follows the same responsive layout patterns, spacing conventions, and accessibility standards used throughout Dawn.

This allows your step-by-step content to inherit your theme’s typography and visual language 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 How It Works 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 use the How It Works Slider in modern and highly customized storefronts.

Theme-Safe by Design

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

• Add or update steps without touching theme code
• Preview changes safely before publishing
• Reuse the same How It Works section across multiple themes
• Switch themes without rebuilding your process explanation

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s How It Works Slider adapts automatically — helping customers understand your offering, build trust, and move confidently toward conversion.