# Step by step

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.

👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/step-by-step) to see how it works 

***

## Basic Option Settings

<figure><img src="/files/nhrkrsppXyOK4ln0j9Rb" alt=""><figcaption></figcaption></figure>

#### 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

<figure><img src="/files/hWTLJtiNH8X70oXhUoLF" alt=""><figcaption></figcaption></figure>

#### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://options-docs-v2.avisplus.io/option-types/all-option-types/step-by-step.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.