> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/markdown/divider.md).

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

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FWnMOxkeA4pcQr4qnQS25%2Fdivider%20example.png?alt=media&amp;token=91ee0183-0c41-46cb-8bfc-c920433e660b" alt=""><figcaption></figcaption></figure>

<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://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FofilB7AnP1X0hvo9JHKy%2Fdivider.png?alt=media&amp;token=260e7742-627f-4b02-bd8d-ccf4ccd5dc35" alt=""><figcaption></figcaption></figure>

<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://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FMljgHc0dLMMHkemrl041%2Fimage.png?alt=media&amp;token=d1cc91c4-2e40-4e50-a95b-5445e21bd1c1" alt=""><figcaption></figcaption></figure>

<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/advanced-setup/other-popular-features/how-to-set-up-conditional-logics.md)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FDiW09VeCz7zgXuw2hZ9A%2Fdividercl.png?alt=media&amp;token=a8858811-7d2d-4b2a-a6bb-a8fe450ba226" alt=""><figcaption></figcaption></figure>

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