> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/infinite-options/conditional-logic/shopify-variants.md).

# Shopify Variants

Conditional Logic can react to the Shopify variant a shopper has selected, not just to your Infinite Options fields. Choose a variant in the condition, and the option shows or hides as the shopper switches size, color, or any other variant on the product page.

## How it works

A shopper has exactly one variant selected at a time.

Select Shopify Variant as the Type for the condition's field, then **Is** or **Is not** as the operator, and pick the specific variant from Shopify's product picker.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2F2XehdZMK7lfOPa1RuIwZ%2Fimage.png?alt=media&amp;token=9459875b-047d-4994-aa9a-2053137a3b7d" alt=""><figcaption></figcaption></figure>

The option shows or hides to match.

## Setting it up

#### Step 1: Add the conditional rule

Open the option you want to show or hide, then scroll to the Optional section and click **Conditional logic**.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FBRpTF7tgyPw13lq9e8vf%2Fimage.png?alt=media&amp;token=b9c9a941-1a0b-44be-a384-a3aa87209598" alt=""><figcaption></figcaption></figure>

#### Step 2: Set the rule

Change the conditions to Show this option When ALL or When ANY conditions match. Then, setup your conditions:

* **Select Type** — select Shopify Variant
* **Operator** — choose **Is** or **Is not**
* **Select Variant** — select the Shopify Variant that should cause this option to display. Search for the product in the product picker, expand it if necessary, and select the variant. It should be a variant that's available on the product you'll be assigning the option set to.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FK82U7i0t0rgx6RGc3I16%2Fimage.png?alt=media&amp;token=87b47e09-1a3c-4d59-802e-542e067bcf1c" alt=""><figcaption></figcaption></figure>

Once selected, the condition shows the variant as a badge with its thumbnail, product title, and variant title.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FU1uD123BlXM062ED68gV%2Fimage.png?alt=media&amp;token=5b440db9-6748-4e9c-b35f-c067de1d59ec" alt=""><figcaption></figcaption></figure>

#### Step 3: Save

Click Save Changes, then test it on your live product page by switching variants.

## Things to know

* The option editor's preview panel doesn't showcase variant conditions; test on your live product page to confirm the setup is working properly.
* If the selected variant is later deleted in Shopify, the condition shows a warning and never matches on the storefront. The condition stays editable so you can choose a different variant or remove it.
