> 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

✨ [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 the **Options** dashboard, click **Add group**
* A popup modal will appear where you can configure the group settings

<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 %}

#### Choose the Untitled group to edit 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>

**🏷️ Group Label -** It will be displayed on the product page as a clickable header:

<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 the Conditional Logic and choose 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 -** Choose how the group appears by default on page load:

* 🔓 **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>

**🧠 Conditional Logic (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/other-popular-features/how-to-set-up-conditional-logics.md) to learn How to set up conditional logic.
{% endstep %}

{% step %}

#### **Click Back to finish creating the option group**

{% endstep %}
{% endstepper %}

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

1. Continue adding options **to this group**&#x20;

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