> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Divider

1. [OPTIS Product Options, Variant](/product-options)
2. [20 Option Types](/product-options/20-option-types)
3. [Static text](/product-options/20-option-types/markdown)

# Divider

A **Divider** is a line that visually separates groups of options - it's not interactive and doesn't collect anything from the customer.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/0/e/d90e9470d92fc800/9924f4fb-6b83-41e6-9528-2f3518_9v2zg7.png)

## When to use a Divider

* Separate personalization options from general options.
* Create visual sections, such as "Step 1 - Choose Size", "Step 2 - Choose Color".
* Improve clarity on products with many options.

## How to add a Divider option
### Step 1: Add the option

Open **1. Add options**, click **Add option**, tick **Divider** under **Static text** on the **New options** tab, then click **Add options**.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/4/3/3/2433b92464355a0/5306fa13-2b1b-470c-b633-a9ffd8_mwyhy3.png)

### Step 2: Style it

Enter a **Label on product** to name the Divider in your option list (the label is not shown on the storefront), then customize **Size** (line thickness in px), **Color** (**Theme color** or **Hex color**) and **Style** (**Dotted**, **Dashed**, **Solid**, **Double**, **Groove** or **Ridge**).

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/d/a/d9daee25cabb9000/f95d14d8-e96b-49f2-bd9a-5a3e3f_1qpsdq8.png)

### Step 3: Save and test

Click **Save**, then open the product page on your store to check that the Divider works correctly.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/0/a/3/20a354e62afcf800/23a1dae1-0eb5-44a9-993a-d9507a_1a0skb9.png)

## Option settings
### Show or hide with Visibility (conditional logic)

Show or hide the Divider based on another option. Available on the **Advanced** plan and above. Note that a Divider can be shown or hidden by other options, but it cannot be used to trigger another option's visibility. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics).

![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/7/6/33760b0018ff3600/a5419cd3-39b0-4677-b8cd-5a6139_bzqr33.png)

### Option width

In the **Display** tab, set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the Divider takes.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/b/2/9db205774d25080/2ba7cdf5-1343-4d40-9c2d-b5b4d2_1vgat3q.png)

## Related guides

* [Heading](/product-options/20-option-types/markdown/heading)
* [Paragraph](/product-options/20-option-types/markdown/paragraph)
* [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)