# Conditional Logic (Avis and Shopify)

**Scenario:** Only if customers choose a Colors, the Sizes responsive to the Colors will show. You can check out our [Demo product](https://avis-demo.avisplus.io/products/conditional-logic) to see how it works 😊\
\
**Here is the step-by-step instruction on how to set up the Conditional logic**

{% hint style="info" %}
Kindly note that for the conditional logic to work, the product should have both Shopify Option and Avis Option
{% endhint %}

**Step 1: Creating Shopify Option**

In the product that the conditional logic will apply, going to the Variants section, filling the variant value. \
In this case, I will put in 3 Colors, Green Yellow and Red, then hit Save (Option A)

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2Fb5dhGJmewp8eox5Arrc2%2Fimage_2024-03-18_143634859.png?alt=media&#x26;token=446f8339-d3e4-4206-ac33-1341ba29f6a1" alt=""><figcaption></figcaption></figure>

**Step 2: Creating Avis Option**

Doing the same steps as in the Guideline of [Creating Option Set](https://options-docs-v2.avisplus.io/building-options/step-2-create-option-sets), then putting in the same number of Options as the number of Logic that you want to create. \
In this case, I have 3 colors so I created 3 options Size for it (and I called this Option B)

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FDDOpGCehknb0liwp2cxY%2Fimage_2024-03-18_112921706.png?alt=media&#x26;token=91028756-7ceb-4d0c-bb14-573955e82717" alt=""><figcaption></figcaption></figure>

In the Set up of Option B, click on **Create Conditional logic**&#x20;

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2Fy0NCLmxJ6aYTmYFsZiwc%2Fimage_2024-03-18_113712312.png?alt=media&#x26;token=fae09257-8a46-4ce8-8d97-211343285ed8" alt=""><figcaption></figcaption></figure>

Then choose the Option that you want to have the Size linked with, putting in their value.\
For example, I have "Size for Green" option and I will link it to Shopify variants called "Green"

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FCtg45KSE9KgzBsYDP2zn%2Fimage_2024-03-18_113859672.png?alt=media&#x26;token=30fa9885-becb-4b28-8411-ec84b4846eaf" alt=""><figcaption></figcaption></figure>

Doing the same thing with other sizes, and choose the Product that you want to have this Option to show on, then hit "Save"

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2F4jcGCKOgcNJxhK6zEgwZ%2Fimage_2024-03-18_114046722.png?alt=media&#x26;token=070d2a71-c33c-4aae-b717-61a4c4777952" 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.
