Conditional logic for product variants

This help article will show you how to make one variant option depend on another.

Product variants

You can add variants to your checkout to sell variations like colors, sizes, and bundles.

Using variants you can also upsell directly from your checkout.

Follow these steps to add a variant to your checkout:

1. Create page from your Checkout Page dashboard and select Checkout
2. Open the Variants tab to Add variant

1. Name your variant and add 1 or multiple variant Options

1. Click Save
2. Repeat to create multiple variants for conditional logic

There is no limit to the number of variants you can add to your checkout.

Learn more about product variants here

Conditional logic for product variants

Conditional logic for product variants lets you decide which options to display based on your customers’ choices.

In other words, the choices for subsequent product variants will be based on another variant’s selection.

Example: For a T-shirt, selecting the color “Red” will show all sizes available in this color.

This approach ensures that customers are only shown relevant options, resulting in a personalized shopping experience that fulfills their individual needs.

Please note: When setting up conditional logic with a quantity selector, quantity has to be applied to the latter variant type. In this case, a quantity selector would be applied to sizes.

How to set up conditional logic for product variants?

1. From your Checkout Page dashboard, click on your checkout and navigate to the Variants tab
2. Click Add variant and set up at least two product variants

1. Click on a variant that you would like to make conditional and scroll down to open the Settings section

1. Check the option for Show/hide logic to activate the conditional statements for this variant

1. Choose the condition you want to apply, such as “is,” “is not,” “is empty,” or “is not empty”

1. Select the respective Variant and Option

• In this case, Sizes for red t-shirts variant will only be shown if the selection for T-shirt colors is Red

1. Click Save and test your checkout!

Types of conditional logic

Checkout Page offers four types of conditional logic for product variants.

Please note: When setting up conditional logic with a quantity selector, quantity has to be applied to the latter variant type. In this case, a quantity selector would be applied to sizes.

“is” logic

“is” conditional logic is applicable when you want to show specific options when your customer makes a selection for another variant.

Example: For a T-shirt, you can display available sizes for a selected T-shirt color. If your customers select the color “Red”, they will see all sizes available in this color.

To apply the “is” conditional logic for displaying the Sizes for Red t-shirts product variant:

Show/hide logic:

• Variant: T-shirt colors
• Conditional statement: “is”
• Option: Red

Open example checkout

This approach ensures that customers are only shown relevant options, resulting in a personalized shopping experience that fulfils their individual needs.

How to set up "is" conditional logic?

1. From your Checkout Page dashboard, click on your checkout and navigate to the Variants tab
2. Click Add variant and set up at least two product variants

1. Click on a variant that you would like to make conditional and scroll down to open the Settings section

1. Check the option for Show/hide logic to activate the conditional statements for this variant

1. Choose the condition you want to apply, in this case: “is”

1. Select the respective Variant and Option
   • In this case, Sizes for red t-shirts variant will only be shown if the selection for T-shirt colors is Red

1. Click Save and test your checkout!

“is not” logic

You can use the “is not” conditional logic to display options when your customer doesn’t select a specific choice for another variant.

Example: When selling different membership tiers, you can choose to upsell an exclusive offer only available when your customer selects any other membership level than Basic.

To apply the “is not” conditional logic for displaying the Add Exclusive 1:1 Online Meetup product variant:

Show/hide logic:

• Variant: Membership level
• Conditional statement: “is not”
• Option: Basic

Open example checkout

How to set up "is not" conditional logic?

1. From your Checkout Page dashboard, click on your checkout and navigate to the Variants tab
2. Click Add variant and set up at least two product variants

1. Click on a variant that you would like to make conditional and scroll down to open the Settings section

1. Check the option for Show/hide logic to activate the conditional statements for this variant

1. Choose the condition you want to apply, in this case: “is not“

1. Select the respective Variant and Option
   • In this case, Upsell offer variant will only be shown if the selection for Membership level is not Basic

1. Click Save and test your checkout!

“is empty” logic

You can use the “is empty” conditional logic to show additional options when a pre-selected choice is unselected or empty.

Example: When selling a service package, you can pre-select Premium support as an add-on by default. If your customers unselect this add-on, you can choose to display a cheaper Advanced support option.

To apply the “is empty” conditional logic for displaying the Advanced support product variant:

Show/hide logic:

• Variant: Support upsell
• Conditional statement: “is empty”

Open example checkout

How to set up "is empty" conditional logic?

1. From your Checkout Page dashboard, click on your checkout and navigate to the Variants tab
2. Click Add variant and set up at least two product variants

1. Click on a variant that you would like to make conditional and scroll down to open the Settings section

1. Check the option for Show/hide logic to activate the conditional statements for this variant

1. Choose the condition you want to apply, in this case: “is empty“

1. Select the respective Variant
   • In this case, Advanced support variant will only be shown if the selection for Support upsell is empty

1. Click Save and test your checkout!

“is not empty” logic

You can use the “is not empty” conditional logic to display specific options when the previous selection is not empty.

Example: When selling a travel guide, you can show map bundles as upsells after selecting a travel guide for a specific destination. These upsells will be hidden until your customer makes a choice for the first variant.

To apply the “is not empty” conditional logic for displaying the Map bundle upsells product variant:

Show/hide logic:

• Variant: Travel guides
• Conditional statement: “is not empty”

Open example checkout

How to set up "is not empty" conditional logic?

1. From your Checkout Page dashboard, click on your checkout and navigate to the Variants tab
2. Click Add variant and set up at least two product variants

1. Click on a variant that you would like to make conditional and scroll down to open the Settings section

1. Check the option for Show/hide logic to activate the conditional statements for this variant

1. Choose the condition you want to apply, in this case: “is not empty“

1. Select the respective Variant
   • In this case, Map bundle upsells variant will only be shown if the selection for Travel guides is not empty

1. Click Save and test your checkout!