Conditional Logic Guide
Create dynamic forms that show or hide options based on selections
4 min readUpdated 2025-01-15conditionallogicrulesshow
Try the rule engine
interactivegroup conditional rules
IFGift wrapping is selected
THENshow group “Wrap style” + “Gift tag”
THENshow group “Wrap style” + “Gift tag”
IFGift wrapping + Rush both selected
THENbadge “Bundle & Save”
THENbadge “Bundle & Save”
IFGift tag not equals None
THENbadge “Gift ready”
THENbadge “Gift ready”
badgesnone yet
Check the parent option to reveal dependent groups and rule-based badges.
Create dynamic customization experiences by showing or hiding options based on customer selections.
What is Conditional Logic?
Conditional logic allows you to:
- Show options only when relevant
- Hide options based on selections
- Create guided product configuration flows
- Reduce customer confusion
- Build complex product bundles
How It Works
example
IF [condition is met]
THEN [show/hide this group]
Example:
example
IF "Add Gift Wrapping" is selected
THEN show "Gift Wrap Style" options
Setting Up Conditional Logic
Accessing Conditional Logic
- Edit an add-on group
- Scroll to Group Conditional Logic
- Click + Add Group Conditional Rule
Creating a Basic Rule
- Select the controlling field: The option that triggers the logic
- Set the condition: equals, not equals, contains, is selected
- Choose the action: Show or Hide this group
Rule Components
| Component | Description | Example |
|---|---|---|
| Field | The option being checked | "Add Warranty" checkbox |
| Operator | How to compare | equals, contains, is selected |
| Value | What to compare against | "true", "Premium", etc. |
| Action | What happens when true | Show group, Hide group |
Common Conditional Patterns
Show When Selected
Scenario: Show color options only when "Add Cover" is checked
example
Field: "Add Cover" checkbox
Operator: equals
Value: true
Action: SHOW "Cover Color" group
Show Based on Choice
Scenario: Show size options based on style selection
example
Field: "Style" radio
Operator: equals
Value: "T-Shirt"
Action: SHOW "T-Shirt Size" group
Hide When Not Needed
Scenario: Hide extended warranty for sale items
example
Field: "Item Type"
Operator: equals
Value: "Sale Item"
Action: HIDE "Extended Warranty" group
Multiple Conditions
Scenario: Show monogram options only for leather wallets
example
Condition 1: "Material" equals "Leather"
AND
Condition 2: "Product Type" equals "Wallet"
Action: SHOW "Monogram Options" group
Operators Explained
equals
Exact match comparison.
example
IF "Color" equals "Red"
Use when: Checking specific selections
not equals
Opposite of equals.
example
IF "Size" not equals "One Size"
Use when: Excluding specific options
contains
Partial match (for text or arrays).
example
IF "Features" contains "Premium"
Use when: Checking multi-select checkboxes
is selected
Checks if any option in a group is selected.
example
IF "Add-ons" is selected
Use when: Checking if customer made any choice
is empty / is not empty
Checks for presence of selection.
example
IF "Gift Message" is not empty
Use when: Checking optional fields
AND vs OR Logic
ALL Conditions (AND)
All conditions must be true.
example
IF "Size" equals "Large"
AND "Color" equals "Red"
THEN show "Large Red Options"
ANY Condition (OR)
At least one condition must be true.
example
IF "Material" equals "Leather"
OR "Material" equals "Suede"
THEN show "Leather Care Kit"
Combining AND/OR
Create complex rules:
example
IF ("Product" equals "Phone Case")
AND ("Color" equals "Clear" OR "Color" equals "Frosted")
THEN show "Screen Protector Bundle"
Best Practices
Keep It Simple
- ✅ Use clear, logical flows
- ✅ Test each rule individually
- ❌ Don't over-complicate
- ❌ Avoid circular dependencies
Order Matters
- Place controlling fields before dependent fields
- Order groups logically in the flow
- Users select from top to bottom
Required Fields in Conditional Groups
When a conditional group is required:
- It's only required when visible
- Hidden groups don't block checkout
- Auto-selection works when group becomes visible
Performance
- Fewer rules = faster evaluation
- Avoid deeply nested conditions
- Test on slower devices
Example Configurations
Product Bundle Builder
example
Group 1: "Choose Your Product" (Radio - Required)
- Option A
- Option B
- Option C
Group 2: "Product A Options" (Conditional)
Show when: "Choose Your Product" equals "Option A"
Group 3: "Product B Options" (Conditional)
Show when: "Choose Your Product" equals "Option B"
Group 4: "Product C Options" (Conditional)
Show when: "Choose Your Product" equals "Option C"
Upgrade Path
example
Group 1: "Base Package" (Radio - Required)
- Basic ($99)
- Standard ($149)
- Premium ($199)
Group 2: "Premium Add-ons" (Checkbox)
Show when: "Base Package" equals "Premium"
Group 3: "Standard+ Options" (Checkbox)
Show when: "Base Package" equals "Standard" OR "Premium"
Gift Options
example
Group 1: "Is This a Gift?" (Checkbox)
- "Yes, this is a gift"
Group 2: "Gift Wrapping Style" (Radio)
Show when: "Is This a Gift?" is selected
Group 3: "Gift Message" (Text input)
Show when: "Is This a Gift?" is selected
Troubleshooting
Rule Not Working
- Check field IDs match exactly
- Verify operator is correct
- Confirm value matches option
- Test the controlling field selection
Group Won't Hide
- Check for conflicting rules
- Verify rule is set to "Hide"
- Clear cache and refresh
- Check for "always show" settings
Circular Dependency
If Group A controls Group B, and Group B controls Group A:
- Identify the circular reference
- Redesign the flow to be linear
- Use a third "controller" group if needed
Selection Persisting After Hide
When a group is hidden:
- Selections are automatically cleared
- Add-ons from hidden groups don't add to cart
- Values don't carry to order notes
Testing Conditional Logic
In the Admin
- Use the Customer Preview panel
- Select different options
- Watch groups show/hide
- Verify all paths work
On the Storefront
- Test on your live preview
- Try all option combinations
- Complete test purchases
- Check order details