# Conditional Logic (Avis Options)

**Scenario:** Only if customers choose to add a card, the option to put in a message on the card will show. You can check out our [Demo product](https://avis-demo.myshopify.com/products/conditional-logic-1) to see how it works 😊

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FCRGTxlO4Btp292b9n2T7%2Fimage_2023-11-06_160242872.png?alt=media&#x26;token=805ece03-b55d-405b-87e3-bb831e10fd0b" alt=""><figcaption></figcaption></figure>

## **How to set up the Conditional logic**

{% hint style="info" %}
Kindly note that, for the Conditional logic feature to work, all related options need to be in the same Option Set.
{% endhint %}

**1.** In the **Avis Option** tab -> **Option Set** section -> click the **Create Option Set** button -> Click **Add option** button -> Choose your Option Type

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FDbNuluSHQ7NQ0jZvKhei%2Fimage.png?alt=media&#x26;token=8ea448d0-e825-42ef-8d3e-ef45570c137d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2F5ituHL8AZGRnPnBKRTrL%2Fimage.png?alt=media&#x26;token=f0b0ee79-1339-496e-b8f3-9ddb334dc97f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FPSbu62AQFcB48HbiKfw7%2Fimage.png?alt=media&#x26;token=3c8fdcfb-9b3a-4c83-8ced-9b7e8e3e2fe5" alt=""><figcaption></figcaption></figure>

&#x20;**2.** To begin, you need to create your primary option (Option A). In this case, we created a radio button option asking if the customer would like to add a card.

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FOlbrqbnLLeDIsM4qbvxJ%2Fimage.png?alt=media&#x26;token=63f5727f-ed05-4228-891e-53bff5d20431" alt=""><figcaption></figcaption></figure>

**3.** Then, create the second option as a text option (Option B) so customers can fill in their message.

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FUMnMwLhBrE9vM56oE3W1%2Fimage.png?alt=media&#x26;token=8264eb5e-3385-4af6-8164-6b16c87141d0" alt=""><figcaption></figcaption></figure>

**4.** Within the second option (Option B), click **Create Conditional logic**

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FTERDUKmeZqeBlcaq3Lke%2Fimage.png?alt=media&#x26;token=42f69094-8a42-429a-918e-4aedf3487a96" alt=""><figcaption></figcaption></figure>

Then, pick the **Label on Cart** of the option that you would like your second option (Option B) to depend on from the dropdown list.

Please choose the correct **Label on Cart** and make sure that it contains your affirmative option value above.&#x20;

{% hint style="info" %}
Please note that every time you change any data of the options related to the Conditional logic, you will need to update the conditions again to ensure everything matches and works smoothly.
{% endhint %}

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2F8jdZ1nbj6NTHMZeQNYtd%2Fimage.png?alt=media&#x26;token=f73a6055-df8d-4a29-ae58-394008bfc2ca" alt=""><figcaption></figcaption></figure>

**5.** Hit **Save** to finish the option B setup.&#x20;

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FVzrgStXitCbyCK9Mqbwi%2Fimage.png?alt=media&#x26;token=6e9f53fc-980e-45e5-9901-5b33b123ab84" alt=""><figcaption></figcaption></figure>

&#x20;**6.** In the **Select product** section, choose the products you want this Option Set to apply to.

**7.** Hit the **Save** button on the top right corner to save the **Option Set** and you're all done!

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2Fjx5tArUZ198hIyHcpv3m%2Fimage.png?alt=media&#x26;token=6d3ba15a-fbe9-4bd3-a184-242df6c10a3b" alt=""><figcaption></figcaption></figure>

You can check on the result in the Preview section (on the right side of the options) or you can open the online Product page and see how the Conditional logic works.

{% hint style="info" %}
The set up of it can be seen in this vid: <https://youtu.be/m9Sbhz3j5z0>
{% endhint %}

***

## Rules and conditions

You can define rules that determine **when to Show, Hide or Disable** a specific option.

> **Show this option if All / Any of the following match**

* **All** → The condition will apply only when *every rule* you add is true.\
  Example: Show “Engraving Font” only if “Add Engraving” is *Yes* **and** “Material” is *Wood*.
* **Any** → The condition will apply if *at least one rule* is true.\
  Example: Show “Gift Wrap” if “Additional Gift” is *Mug* **or** *Notebook*.

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2Frvip0ga9y9DbUu509vdZ%2Fimage.png?alt=media&#x26;token=a065d76b-f910-41b1-b2b6-8af78b6c667a" alt=""><figcaption></figcaption></figure>

***

### Condition Types Explained

<table data-header-hidden><thead><tr><th width="170"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Condition Type</strong></td><td><strong>Description</strong></td><td><strong>Example</strong></td></tr><tr><td><strong>contains</strong></td><td>True if the selected option <strong>includes</strong> the specified value.</td><td>Show if <strong>Size</strong> option contains <em>Small</em><br><em>(Medium Small will be accepted)</em></td></tr><tr><td><strong>does not contain</strong></td><td>True if the selected option <strong>does not include</strong> the specified value.</td><td>Show if <strong>Size</strong> option does not contain <em>Small</em>.<br><em>(Medium Small won't be accepted)</em></td></tr><tr><td><strong>is equal to</strong></td><td>True if the selected option’s value <strong>exactly matches</strong> the specified value.</td><td>Show if <strong>Size</strong> option is equal to <em>Small</em><br><em>(Medium Small won't be accepted)</em></td></tr><tr><td><strong>is not equal to</strong></td><td>True if the selected option’s value <strong>does not match</strong> the specified value.</td><td>Show if <strong>Size</strong> option is not equal to <em>Small</em><br><em>(Medium Small will be accepted)</em></td></tr><tr><td><strong>starts with</strong></td><td>True if the selected option’s value <strong>begins with</strong> the specified text.</td><td>Show if <strong>Size</strong> option starts with S<br><em>(Small will be accepted)</em></td></tr><tr><td><strong>ends with</strong></td><td>True if the selected option’s value <strong>ends with</strong> the specified text.</td><td>Show if <strong>Size</strong> option ends with l<br><em>(Medium Small will be accepted)</em></td></tr><tr><td><strong>greater than</strong></td><td>True if the selected option’s numeric value <strong>is higher than</strong> the entered number.</td><td>Show if <strong>Quantity</strong> option is greater than <em>5</em>.</td></tr><tr><td><strong>less than</strong></td><td>True if the selected option’s numeric value <strong>is lower than</strong> the entered number.</td><td>Show if <strong>Quantity</strong> option is less than <em>3</em>.</td></tr><tr><td><strong>has any value</strong></td><td>True if the selected option <strong>has any value selected or entered.</strong></td><td>Show if <strong>Custom Text</strong> option os input.</td></tr><tr><td><strong>has no value</strong></td><td>True if the selected option <strong>is empty or not selected.</strong></td><td>Show if <strong>Custom Text</strong> option hasn't been input</td></tr></tbody></table>
