Step by step
The Step by Step option type allows you to organize your product options into sequential steps.
This feature is especially useful for complex products that require customers to make several layered choices (e.g., style → material → personalization). By breaking options into steps, the process feels smoother and easier to follow.
Basic Option Settings
1. Option Name
The internal name used to identify the Step by Step option in your app setup. Helps you manage and organize options effectively.
2. Label on Product
The title shown above the Step by Step section on the product page. This label guides customers on what they’re customizing.
3. Layout
Choose the styling format for how the Step by Step option will appear on your product page.
4. Step
Each step represents a stage in the customization process.
You can click Select Template or Add Option to include options within a step.
Add an image, name, and description to visually explain each step.
Customers must complete one step before moving on (if enabled).
5. Button
Customize the appearance of navigation buttons (Next/Previous) between steps. You can choose from:
Combine (icon + text)
Icon Only
Text Only
None
6. Must Complete Current Step to Move to Next Step
Enable this setting if customers are required to make a selection before proceeding.
Advanced Option Settings
1. Class Name
Add a custom CSS class name to apply specific styles to the Step by Step option.
2. Tooltip
Provide a short explanation that appears when customers hover over the option. Useful for quick hints.
3. Help Text
Add longer, detailed information directly below the Step by Step option. This helps customers better understand their choices at each stage.
Last updated