⌘K

Conditional Logic Guide

Create dynamic, intelligent forms that adapt based on customer selections.

What is Conditional Logic?

Conditional logic allows you to show or hide options based on what a customer has selected. This creates a more relevant, streamlined experience by only displaying applicable choices.

Common Examples

  • Show engraving options only when "Gift" packaging is selected
  • Display size chart when clothing category is chosen
  • Hide incompatible accessories based on base product choice
  • Show premium add-ons only for higher-tier products

Rule Structure

Each conditional rule has three parts:

1. Trigger (When)

The condition that activates the rule:

  • Option Selected - When specific option is chosen
  • Option Not Selected - When option is not chosen
  • Any Selected in Group - When any option in a group is chosen

2. Action (Then)

What happens when the trigger fires:

  • Show - Make target visible
  • Hide - Make target invisible
  • Enable - Make target selectable
  • Disable - Make target non-selectable

3. Target (What)

What is affected by the action:

  • Specific Option - Single option
  • Option Group - Entire group of options
  • Multiple Options - Several specified options

Creating Rules

Basic Rule Setup

  1. Open the add-on group or option
  2. Find the Conditional Logic section
  3. Click Add Rule
  4. Configure the trigger:
    • Select the trigger group
    • Select the trigger option
    • Choose "is selected" or "is not selected"
  5. Set the action (Show/Hide)
  6. Verify the target
  7. Save the rule

Example: Gift Options

Goal: Show "Gift Message" only when "Gift Wrap" is selected.

  1. Open the "Gift Message" option
  2. Add a conditional rule
  3. Trigger: "Gift Wrap" option IS selected
  4. Action: Show this option
  5. Save
💡 Result: Gift Message field only appears after customer selects Gift Wrap.

Multiple Conditions

AND Logic

When you add multiple conditions to one rule, ALL must be true:

IF Color = "Gold" AND Material = "Premium"
THEN Show "Engraving Options"

OR Logic

Create separate rules for OR behavior:

Rule 1: IF Color = "Gold" THEN Show "Engraving"
Rule 2: IF Color = "Silver" THEN Show "Engraving"

Complex Combinations

Build sophisticated logic with multiple rules:

Rule 1: IF Plan = "Premium" THEN Show "Priority Support"
Rule 2: IF Plan = "Premium" AND Term = "Annual" THEN Show "Bonus Features"

Hidden Options Behavior

Validation

  • Hidden options skip validation
  • Required fields that are hidden don't block checkout
  • Values are cleared when hidden (configurable)

Pricing

  • Hidden options don't affect price
  • Linked products not added to cart
  • Price updates dynamically as options show/hide

Cart Behavior

  • Only visible selections go to cart
  • Hidden options are completely excluded
  • No hidden line items or properties

Common Patterns

Dependent Options

Options that only make sense with another selection:

IF "Monogram" is selected
THEN Show "Monogram Text" input
THEN Show "Monogram Font" selector

Mutually Incompatible Options

Hide options that don't work together:

IF "Matte Finish" is selected
THEN Hide "Glossy Coating"

Progressive Disclosure

Reveal options step by step:

Step 1: Select product type
Step 2: IF Type selected, show relevant options
Step 3: IF options selected, show customization

Conditional Upsells

Show upgrades based on selections:

IF cart total > $50
THEN Show "Free Shipping Upgrade to Express"

IF "Basic Package" is selected
THEN Show "Upgrade to Premium (+$10)" option

Canvas Integration

Conditional logic works with Canvas layers:

  • Layers can have their own conditions
  • Hidden options don't trigger canvas updates
  • Show different previews based on selections

Testing Rules

Using Preview Mode

  1. After saving rules, click Preview
  2. Interact with options as a customer would
  3. Verify show/hide behavior is correct
  4. Test all trigger combinations

Storefront Testing

  1. Visit your product page
  2. Test each conditional flow
  3. Check validation with hidden required fields
  4. Verify cart contents after checkout
  5. Test on mobile devices

Troubleshooting

Rule not triggering

  • Verify trigger option exists and is active
  • Check rule is saved and enabled
  • Ensure trigger value matches exactly
  • Clear cache and refresh

Wrong options showing/hiding

  • Review all rules affecting the target
  • Check for conflicting rules
  • Simplify to isolate the issue
  • Verify AND vs OR logic

Hidden required field blocking checkout

  • Verify option is truly hidden (not just invisible)
  • Check conditional rule is active
  • Ensure hide behavior clears validation requirement

Best Practices

  • Start simple - Build one rule at a time
  • Document your rules - Note what each rule does
  • Test thoroughly - Check all combinations
  • Consider mobile - Ensure good UX on small screens
  • Don't overdo it - Too much logic can confuse
  • Use clear labels - Help customers understand why options appear

Next Steps

Previous ← Badges & Labels Next Storefront Customization →