> 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/others/option-group.md).

# Option Group

{% hint style="info" %}
**Plan:** Option groups are available on the **Advanced** plan and above. On the Free plan you can still try them on one live product with a Premium option set. See [Plans and feature availability](/product-options/getting-started/plans-and-features.md).
{% endhint %}

✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/custom-backpack-option-group?_pos=1&_psq=option+group&_ss=e&_v=1.0)

## 📂What is an Option Group?

An **Option Group** is a container that holds multiple options under a single group title.

* Options inside a group can be **collapsed or expanded**
* Customers can click the group title to show or hide its options
* This is especially useful for products with many customization fields

Option Groups help structure complex option sets and improve the overall user experience.

## How Option Groups Appear on the Storefront

{% embed url="<https://jam.dev/c/0fe7df8d-427c-4221-bed5-864d011b209c>" %}

## ⚙️How to Create an Option Group

#### Step 1: Create an option group

* In **1. Add options**, click **Add group** (or **Add group after** from an option's menu).
* The group is added as **Untitled Group** and its settings open in the editor panel, with **Content** and **Display** tabs.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FhuGnnpVlwqqhxLmDdY4H%2Fadd%20group.png?alt=media&amp;token=4ea78376-deae-4e11-a2dc-dc780667f18e" alt=""><figcaption></figcaption></figure>

#### Step 2: Configure Option Group Settings

{% stepper %}
{% step %}

#### In the **Content** tab, set the group label:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FLQ6VzD3fCjpdCso2VXGu%2Fimage.png?alt=media&amp;token=1699b41b-8730-41c1-a059-cffe8df17445" alt=""><figcaption></figcaption></figure>

**🏷️ Label on product -** Type the name in **Label on product** (max 250 characters). It is displayed on the product page as a clickable header. You can also click the group name at the top of the panel to rename it:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FueboT71UqDEJyaUGbiLh%2Fgroup%20label.png?alt=media&amp;token=753ba3c7-b74c-457f-a21c-21e6517dab46" alt=""><figcaption></figcaption></figure>

#### In the **Display** tab, you can add **Visibility** (conditional logic) and choose the **Display type**

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FxHySsi19cZOjBqeifIxq%2Fdisplay%20group.png?alt=media&amp;token=3495b995-dc04-476b-9bb5-8d9367617ec7" alt=""><figcaption></figcaption></figure>

**🔽 Display type -** Under **Default state when page loads**, choose how the group appears by default:

* 🔓 **Expand -** The group is **open by default**, and all options inside are immediately visible.\ <mark style="color:$success;">Recommended for required or frequently used options.</mark>
* 🔒 **Collapse -** The group is **hidden by default**. Customers must click the group title to view the options.\ <mark style="color:$success;">Recommended for optional or advanced settings.</mark>

**🧠 Visibility (optional)**

* You can control when this option group is shown or hidden based on a previous selection
* This is useful for showing additional options only when certain conditions are met

Click [**here**](/product-options/advanced-setup/how-to-set-up-conditional-logics.md) to learn How to set up conditional logic.
{% endstep %}

{% step %}

#### **Click the back arrow at the top of the panel to finish creating the option group**

{% endstep %}
{% endstepper %}

#### Step 3: Add Options to the Group

1. Continue adding options **to this group** with **Add option in group** (use **Add option after group** to add an option outside of the group)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fxk9BDqqQ4cA3PwVOiPni%2Fadd%20option%20in%20group.png?alt=media&amp;token=49580821-1a3c-4c39-9444-0fbbef95b8a3" alt=""><figcaption></figcaption></figure>

2. Select the option type you want to create (checkbox, textbox, etc.)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FZXPhD8LtPwijHtrnbFgu%2Fadd%20options.png?alt=media&amp;token=4f337fba-8e7c-4131-acf6-fcd157e7b530" alt=""><figcaption></figcaption></figure>

3. Configure the option as you normally would and click Save

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FUkWBUon1ziSQsSbbZp0E%2Fsave.png?alt=media&amp;token=e3863dfa-0d49-4b0f-8a78-bc4364986dd8" alt=""><figcaption></figcaption></figure>

You will now see:

* The option added inside the group
* A live preview on the **right-hand side** showing how the option group expands and collapses

<mark style="color:blue;">**NOTE**</mark>: If you previously created the separate options and want to add them into a new Option Group, you can drag and drop the option here:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FK1S8TvC2bhFNK9EWFrGk%2FScreenshot%20at%20Aug%2008%2010-27-29.png?alt=media&amp;token=09738989-4bde-40a6-add5-aa941b12a77e" alt=""><figcaption></figcaption></figure>

#### Step 4: Apply to Products & Save

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FjkOCAV0QABmqYCLTgyhj%2Fk.png?alt=media&amp;token=a45404e8-7a95-4dcd-a186-b2574f0ee62e" alt=""><figcaption></figcaption></figure>