> 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/advanced-setup/how-to-set-up-conditional-logics.md).

# How to set up Conditional logics?

## 🎯 Objective

Conditional Logic allows you to show or hide product options dynamically based on your customer’s selections. The goal is to create a clean, intuitive, and user-friendly product configuration experience ✨

## How Visibility works

Conditional logic is called **Visibility** in the editor. You will find it in the **Display** tab of every option, and in the **Display** tab of a [group](/product-options/20-option-types/others/option-group.md).

1. Open the option (or group) you want to show or hide and go to the **Display** tab.
2. Under **Visibility**, click **Add condition**.
3. Choose **Show** or **Hide**, and whether **all** or **any** of the conditions must match. The sentence reads, for example: "Show this option when all of the following conditions match".
4. For each condition, choose:
   * **Option** - the option whose answer controls this one.
   * **Condition** - **is**, **is not**, **contains** or **does not contain**. When the controlling option is a Number field, use **is**, **is not**, **less than** or **greater than**.
   * **Value** - the value to compare with. For options with a list of values (Dropdown menu, Radio button, Checkbox, Button, Swatch and so on) pick a value, or **Any value** to match as soon as the customer selects something. For Text box, Text area, Number field and Email options you type the value.
5. Add more conditions with **Add condition**, then click **Save**.

{% hint style="warning" %}

* The option set needs at least two options, because an option cannot be controlled by itself.
* **File upload**, **Date & time**, **Color picker**, **Paragraph**, **Heading**, **Divider** and **Pop-up modal** options cannot be used as the option that controls others. They can still be shown or hidden by other options.
* Conditional logic is an **Advanced** feature. On the Free plan you can use it on one product with a Premium option set. See [Plans and feature availability](/product-options/getting-started/plans-and-features.md).
  {% endhint %}

#### <mark style="color:$primary;">Example 1: Text vs. Image for Embroidery</mark>

Imagine selling a custom T-shirt where customers choose between adding Text or an Image for embroidery.

✅ If they choose Text, they’ll see a textbox to type in.

✅ If they choose Image, they’ll get a file upload option instead.

<figure><img src="https://storage.crisp.chat/users/helpdesk/website/22429817467a0000/image_1tvcyfr.png" alt=""><figcaption></figcaption></figure>

#### Here’s how to set it up <a href="#id-3-heres-how-to-set-it-up" id="id-3-heres-how-to-set-it-up"></a>

1️⃣ Create a radio button with “Text” and “Image” options.

2️⃣ Add a textbox for text input.

3️⃣ Add a file upload for images.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FhAIqM2bTA623ZFSKFUIA%2FScreenshot%20at%20Aug%2007%2016-34-35.png?alt=media&amp;token=adcb2dae-cbbb-4693-a0a0-d16837b30302" alt=""><figcaption></figcaption></figure>

4️⃣ Navigate to the **Display** tab > **Add condition**:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FbxJBtwQlyulkZjDZe20d%2FScreenshot%20at%20Aug%2007%2016-35-30.png?alt=media&amp;token=e9fe632d-07b2-408f-8500-69e52eef9f66" alt=""><figcaption></figcaption></figure>

5️⃣ Set up Conditional Logic to show only the relevant option based on their selection:

* For the Textbox: **Show** this option when 'Customize T-shirt' **is** 'Add text':

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FF7V5YxXMqCFioGFQXgfv%2F2.png?alt=media&amp;token=061682ca-48f5-477a-9f32-f5332016be99" alt=""><figcaption></figcaption></figure>

* For the File Upload: **Show** this option when 'Customize T-shirt' **is** 'Add image':

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fpwe6Wtp0A9SsBjjZpMsn%2F3.png?alt=media&amp;token=37930cc4-0f43-4b41-8728-ea9c1b72bdc9" alt=""><figcaption></figcaption></figure>

Now, customers only see what they need—keeping things clean and intuitive!

#### <mark style="color:$primary;">Example 2: Number of People & Textboxes</mark>

Let’s say you offer a T-shirt where customers can add names based on how many people they select.

✅ If they pick 1 person, they get 1 textbox.

✅ If they pick 2 people, they get 2 textboxes.

✅ If they pick 3 people, they get 3 textboxes.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fcy3YMYRdOunhLOUY7Yfn%2FScreenshot%20at%20Aug%2007%2016-59-33.png?alt=media&amp;token=bd4a6f0f-674b-4505-ac77-426076aa8b0b" alt=""><figcaption></figcaption></figure>

#### Here’s how to set it up <a href="#id-3-heres-how-to-set-it-up" id="id-3-heres-how-to-set-it-up"></a>

1️⃣ Create an option with “1 person”, “2 people" and "3 people"

2️⃣ Add 3 textboxes for name input.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F7b4AFYFr72f9ZjbGk2tL%2F4.png?alt=media&amp;token=fb7b247e-92e0-4d38-ac96-379271111555" alt=""><figcaption></figcaption></figure>

3️⃣ Use Conditional Logic to:

* Show Textbox 1 for all 3 choices - because this Textbox 1 will appear on “1 person”, “2 people" and "3 people" selections.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FD1sOWPtvYHEk3x2dQLbk%2F5.png?alt=media&amp;token=28d9bb91-6bd7-457c-ae24-95fa63076568" alt=""><figcaption></figcaption></figure>

* Show Textbox 2 when "2 people" and "3 people" are selected - Because the second textbox will only appear for these 2 selections:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fifjmir4qSJWfrzZBCW7g%2F6.png?alt=media&amp;token=14e4c71c-2377-49d1-9789-81520c34f649" alt=""><figcaption></figcaption></figure>

* Lastly, show Textbox 3 when "3 people" is selected:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FeGv5RcB77nJoTwPAU6O9%2F7.png?alt=media&amp;token=7fe4447e-7d9d-4c01-bfdc-ea35f2a063fc" alt=""><figcaption></figcaption></figure>

Now, the form updates dynamically, keeping it simple and user-friendly!

And that’s it! Conditional Logic ensures customers only see what’s relevant - making their shopping experience smoother. Try it out and let us know how it works for you!
