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

# Heading

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)

# Heading

A **Heading** shows a bold line of text on the product page to separate sections or label a group of options - it doesn't collect anything from the customer.

✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/heading?variant=51026014273814)

![](https://storage.crisp.chat/users/helpdesk/website/-/d/2/e/2/d2e2db844f263000/70f9f282-c9b0-44bd-926d-c82779_1ic1qgy.png)

## When to use a Heading

* Group related customization fields under one title.
* Label steps in a multi-step configuration (e.g., "Step 1: Choose your Size").
* Draw attention to a section, such as "Gift Options".

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/6/5/f/d65f3d4f530ef000/f7e6f2d8-1298-4d61-a281-c489e7_szs3lk.png)

### Step 2: Write the content

Enter a **Label on product** to name the Heading in your option list - the label itself is not shown on the storefront, only the heading text is. Enter your text in **Heading content** (e.g., "Step 1: Choose your Size"), then adjust **Size** (in px), **Text color** (**Theme color** or **Hex color**) and **Font weight** (**Bold** or **Normal**).

![](https://storage.crisp.chat/users/helpdesk/website/-/6/c/5/f/6c5fc9040daed800/d3710741-2337-4e3a-b988-7ab567_jowq1o.png)

### Step 3: Save and test

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/6/5/7/965714825c54d80/bec39e83-a9d1-4bf5-ade5-e12552_5q6afj.png)

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

Show or hide the Heading based on another option. Available on the **Advanced** plan and above. Note that a Heading 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/-/7/0/c/4/70c4fca59d6eec00/e27da88f-066c-4595-9b31-fc4dcc_elr6zz.png)

### Option width

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

![](https://storage.crisp.chat/users/helpdesk/website/-/3/7/c/3/37c3a0424020b400/061f8840-c580-4b95-b398-d2c45b_1ql5ml2.png)

## Related guides

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