> 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/heading.md).

# Heading

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

### 1. How Does the Heading Display?

The Heading option displays as a bold, attention-grabbing line of text on your product page. It’s used to separate sections within your options list or label a group of options to improve clarity and organization. It does not collect any input from customers.

Example of how it appears on a product page:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FhRDWzjR5bBl9wqUfnhQz%2Fheading.png?alt=media&amp;token=67bc9e9a-0946-4291-8994-ccc15bc7943a" alt=""><figcaption></figcaption></figure>

### 2. How to Create a Heading

**Step 1: Add a New Option**

* Click Add Option > Heading to create a new option

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FKcvvlbbaMdwhZcFMUA69%2Fadd-heading.png?alt=media&amp;token=dc9d53fb-5252-4f7e-a6c7-b7dbdc4af510" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXewpMyTBMU4Yo7ijc6CqovUrty-aznvKBuj7__wGhroIfEwKgmhB4hM-iUtBVuZ6xXF9ss-WLN5-WkcKqdihF2yEEG8dNhJl3SbqM8WN_85pz_whIwZ5TdUHvGczMejK0-h0KnHvA?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 2: Add information to the Heading**

* Enter an option name for the Heading (This will not show on the store front)
* Enter your heading text in the field (e.g.: Step 1: "Choose your Size”).
* Adjust Size, Text color, Font weight for the heading.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FsW5Fs9nLzyFY0mfKQ8AO%2Fheading%20content.png?alt=media&amp;token=f535af56-3b7e-489e-bbc8-142edeea5def" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
**Conditional Logic:** Enable conditional logic if you want the Heading 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)
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FqUsXWe2A9qDqAsOFQHXL%2Fheadingcl.png?alt=media&amp;token=c5debf26-9bd1-4890-960e-9d9a7bc22dec" alt=""><figcaption></figcaption></figure>

**Step 4: Save and Test**

* Click Save to apply the settings.
* Visit the product page on your store to check if the Heading works correctly.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F7lYfmSIRV4LYGAOeCRuu%2Fheadinglv.png?alt=media&amp;token=e5c66b44-aaaa-4624-92c8-3d604c0b3b5e" alt=""><figcaption></figcaption></figure>

### 3. Real-World Applications of Heading

* Grouping related customization fields
* Adding titles for steps in a multi-step configuration
* Drawing attention to specific sections (e.g., "Gift Options", "Upload Your Image")
* Improving layout and readability of long forms

### 4. Key Features of Heading

* Purely for visual organization, not for customer input
* Makes long option lists easier to navigate
* Fully supports conditional visibility
* Displayed as bold text, styled consistently with your theme