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.