⚠️ Conditional Display requires a Professional or Unlimited plan.
Overview
Conditional display allows you to:
Show options only when specific conditions are met
Hide options based on other selections
Create multi-step workflows that guide customers
Simplify complex product configurations
Build product bundles with context-aware options
How Conditions Work
Each condition consists of three parts:
Condition Type: What triggers the condition (Another Option or Shopify Variant)
Condition Operator: How to evaluate the condition (equals, not equals, is filled, etc.)
Value: What to compare against (if applicable)
Condition Types
Other Option
Base conditions on another product option within the same group.
Available operators:
is equal to: Matches a specific value
is not equal to: Doesn't match a specific value
is filled: Customer entered any value (for text inputs)
is empty: Customer hasn't entered anything
is checked: Checkbox is selected
is unchecked: Checkbox is not selected
is in list: Matches any value from a comma-separated list
Example use cases:
Show "Engraving Text" only when "Add Engraving" is checked
Display "Gift Message" when "Gift Wrap" equals "Yes"
Show "Frame Size" only when "Add Frame" is not empty
Display "Rush Processing" when "Delivery Speed" is in list "Express, Overnight"
Shopify Variant
Base conditions on the selected Shopify product variant's option values (Size, Color, Material, etc.).
Available operators:
is equal to: Variant option matches a specific value
is not equal to: Variant option doesn't match a value
is in list: Variant option matches any value from a comma-separated list
How to set up:
Enter the Shopify option name (e.g., "Size", "Color")
Choose an operator
Enter the value to compare (e.g., "Large", "Red")
Example use cases:
Show "Hem Length" only when Size equals "Pants"
Display "Battery Type" when Color equals "Wireless"
Show "Mounting Hardware" when Size is in list "Large, X-Large"
Hide "Personalization" when Color equals "Custom"
Visibility Settings
Visibility Action
Controls the default state and how conditions affect visibility:
"Show when conditions are met" (Default: Hidden)
Option is hidden by default
Appears only when conditions are satisfied
Best for progressive disclosure workflows
"Hide when conditions are met" (Default: Visible)
Option is visible by default
Disappears when conditions are satisfied
Best for hiding incompatible options
Condition Behavior
When multiple conditions exist, choose how they work together:
"All conditions must be met (AND)"
Every condition must be true
More restrictive
Example: Show only when "Gift Wrap" = "Yes" AND "Priority Shipping" = "Selected"
"At least one condition must be met (OR)"
Any condition can be true
More flexible
Example: Show when "Size" = "Large" OR "Size" = "X-Large"
Setting Up Conditions
Go to your option group
Click on the option you want to make conditional
Scroll to Conditional Display section
Click Add Condition
Choose Condition Type (Other Option or Shopify Variant)
Select the operator (equals, not equals, etc.)
Enter the value if required
Set Visibility Action (Show or Hide)
If multiple conditions, set Condition Behavior (AND or OR)
Save your changes
Common Patterns
Pattern 1: Progressive Disclosure
Goal: Show options only when relevant
Option: "Engraving Text"
Condition Type: Other Option
Select Option: "Add Engraving"
Condition: is equal to
Value: "Yes"
Visibility Action: Show when conditions are met
Pattern 2: Size-Specific Options
Goal: Show different options based on variant size
Option: "Inseam Length"
Condition Type: Shopify Variant
Option Name: "Size"
Condition: is in list
Value: "30x30, 32x32, 34x34"
Visibility Action: Show when conditions are met
Pattern 3: Exclusive Options
Goal: Hide incompatible choices
Option: "Standard Delivery"
Condition Type: Other Option
Select Option: "Express Shipping"
Condition: is checked
Visibility Action: Hide when conditions are met
Pattern 4: Complex Requirements
Goal: Show only when multiple criteria met
Option: "Premium Packaging"
Conditions:
Other Option: "Product Type" equals "Gift"
Other Option: "Price Tier" equals "Premium"
Condition Behavior: All conditions must be met (AND)
Visibility Action: Show when conditions are met
Best Practices
Do:
Test your conditions thoroughly on the storefront
Keep condition logic simple and easy to understand
Use progressive disclosure to reduce cognitive load
Document complex condition workflows
Test all paths through conditional options
Don't:
Create circular dependencies (Option A depends on B, B depends on A)
Make required options conditional without a fallback
Use too many nested conditions (keep it under 3 levels)
Forget to test edge cases and corner cases
Assume customers will understand hidden logic
Tips
Use "is in list" for multiple values instead of creating many conditions
Combine with default values to pre-fill conditional options
Test conditions with different variant combinations
Document your condition logic for future reference
Consider using option descriptions to explain conditional behavior
Use the ConnectIcon indicator shows which options have conditions