Steps

Overview

The Steps section controls the navigation and flow of the bundle selection process by organizing products into structured steps.

It works together with layout settings to define how step collections are displayed and interacted with.

Purpose

Guide users step-by-step through bundle selection
Organize products into logical groups
Improve clarity and user experience
Control navigation flow within the bundle

Behavior

Each step represents a product group or selection stage
Users switch between steps to complete the bundle
Step states update dynamically based on selections
Navigation and UI update instantly in preview and storefront

Step Display (Collection Display)

The visual structure of the steps is controlled by the following:

Layout → Split Container Layout → Collection Display

Available Options

Tabs

Steps appear as horizontal selectable tabs
Only one step is visible at a time

Accordion

Steps expand and collapse vertically
Multiple sections can be viewed in sequence

Stack

All steps are displayed one below another
No switching required; full visibility

Users can navigate steps using:

Clicking on step headers (Tabs / Accordion)
Scrolling (Stack layout)
Next / Previous controls (if enabled)

Step States

Default

The step is available but not active

Active

Currently selected or opened step

Completed

Step requirements are fulfilled

Styling

All visual styling is controlled from the Steps section inside Styling.

Layout Styling

Alignment (horizontal)
Spacing between steps
Width behavior

Typography

Font size
Font weight
Text color

Colors

Defines appearance for:

Default state
Active state
Completed state

Indicators

Step numbers
Icons
Completion indicators

Spacing

Gap between steps
Padding within step items

Interaction Rules

Selecting items updates step completion
Active step changes instantly on interaction
Layout behavior depends on selected Collection Display type

Responsive Behavior

Desktop

Full layout (Tabs / Accordion / Stack)

Mobile

Tabs scroll horizontally
Accordion and stacks provide better usability for longer content

Dependency Rules

Layout Dependency

The step display type is controlled from the following:
Layout → Split Container Layout → Collection Display
Changing layout directly affects step behavior

Bundle Logic

Steps are linked to product grouping
Completion depends on selection rules

Progress System

Steps work alongside progress indicators
Completion may contribute to tier progression

Common Issues to Avoid

Wrong layout selection for use case
Steps not updating on selection
Poor spacing between steps
Too many steps causing complexity
Mobile usability issues with Tabs

Best Practices

Use Tabs for simple bundles
Use Accordion for detailed selections
Use Stack for full visibility
Keep steps between 3 and 5.
Use clear and concise titles
Ensure strong visual difference between states

Final Summary

The Steps system defines the structure and navigation of the bundle flow, while the Collection Display setting controls how steps are visually presented.

Together, they ensure:

Clear user journey
Flexible layouts
Better usability and conversions