# Divider

### <sup>1. What is a Divider?</sup> <a href="#id-3-1-what-is-a-divider" id="id-3-1-what-is-a-divider"></a>

The Divider is a non-interactive element used to visually separate groups of options or content within your product form. It helps organize options clearly for a better user experience.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfFNm3V5S3DPFi-kMWSYZYTfMTESS9Mh8NmiutgQjUL48JuBmCi8s-aCJ3jMtbcyYOKAlhBqhj0F7EGXY4R83pWfCKjZKlTTcdSx2E3R6TT4M0yopTHKWlAcVCrlqTS1eTo79fYQg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

### 2. How to Add a Divider? <a href="#id-3-2-how-to-add-a-divider" id="id-3-2-how-to-add-a-divider"></a>

**Step 1: Add a New Option**

* Click Add Option > Divider to create a divider.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcdxd9FVCDW00jsNs4EGgR8g7S_YWgtHGkZILR40yUsbCNXr7ijkuRBTnGVlHqTMofsZBUvi1wid7b3x4siU72N6s3T0BVqdMDBePmNlTJIeS7XLnNfjuq15sFt9X90TKaCTC8N?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 2: Add Information to the Divider**

* Enter an option name for the Divider (This will not show on the store front)
* Customize Size, Color, and Style for your divider

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeRLa3Oq36SmM7MPXwILc0YdNT1kD1gzIZr8Bzr5Va4BOx3LAGBkZz0liy8jbMpjdQWFu-0zcinMVogxPaUHPjLjeMX228GyalYtDNePgJaEFglOiFzszmSUX_5Izp2zMtq_kGTKQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 3: Advanced Settings (If Needed)**

* Conditional Logic: Enable conditional logic if you want the Switch to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics.md)

### 3. Real-World Use Cases <a href="#id-3-3-real-world-use-cases" id="id-3-3-real-world-use-cases"></a>

* Separate product personalization options from general options.
* Create visual sections like “Step 1 – Choose Size”, “Step 2 – Choose Color”.
* Improve form clarity, especially on products with many options.

### 4. Key Features <a href="#id-3-4-key-features" id="id-3-4-key-features"></a>

* Enhances layout and user flow.
* No impact on pricing or customer input.
* Simple to add and customize.


---

# 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://docs.optis.me/product-options/18-option-types/markdown/divider.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.
