Skip to main content

How to set up conditional logic?

Conditional logic allows you to show/hide options based on customer selections, creating an intelligent and personalized shopping experience.

What is Conditional Logic?​

Definition: Automatically show or hide options based on previous customer selections.

Simple Example:

  • If customer selects "Yes engraving" → Show name input field
  • If customer selects "No engraving" → Hide name input field

Types of Conditions​

1. Simple Conditions​

Syntax: If [Option A] = [Value X] then show [Option B]

Example:

If "Product Type" = "T-shirt"
→ Show "Size Selection"

2. Complex Conditions​

Syntax: If [Option A] = [Value X] AND [Option B] = [Value Y] then show [Option C]

Example:

If "Product Type" = "T-shirt" AND "Color" = "Black"
→ Show "Print Style Selection"

3. OR Conditions​

Syntax: If [Option A] = [Value X] OR [Option A] = [Value Y] then show [Option B]

Example:

If "Size" = "L" OR "Size" = "XL"
→ Show "Fit Style Selection"

How to Set Up Conditional Logic​

Step 1: Identify Condition Options​

  • Choose option that will be the trigger
  • Identify trigger values
  • Identify options that will be affected

Step 2: Configure in Editor​

  1. Select option that needs conditional logic
  2. Find "Visible Condition" section
  3. Click "Add Condition"
  4. Choose condition option
  5. Enter condition value (equals only)
  6. Choose action (Show/Hide)

Step 3: Test Conditions​

  1. Use Live Preview
  2. Change condition selections
  3. Check options show/hide correctly
  4. Test on mobile and desktop

Real Examples​

Example 1: T-shirt Product​

Option Structure:

  • T-shirt Type: Select (Regular, Polo, Tank)
  • Print Logo: Select (Yes, No)
  • Upload Logo: Upload (only show when "Yes")
  • Print Position: Select (only show when "Yes")

Conditional Logic:

If "Print Logo" = "Yes"
→ Show "Upload Logo" and "Print Position"

If "Print Logo" = "No"
→ Hide "Upload Logo" and "Print Position"

Example 2: Jewelry Product​

Option Structure:

  • Engraving Type: Select (Name, Birth Date, Image)
  • Enter Name: Text (only show when "Name")
  • Select Date: Date (only show when "Birth Date")
  • Upload Image: Upload (only show when "Image")

Conditional Logic:

If "Engraving Type" = "Name"
→ Show "Enter Name", Hide other options

If "Engraving Type" = "Birth Date"
→ Show "Select Date", Hide other options

If "Engraving Type" = "Image"
→ Show "Upload Image", Hide other options

Example 3: Simple Product​

Option Structure:

  • Size: Select (S, M, L, XL)
  • Color: Select (Black, White, Blue)
  • Print Style: Select (Regular Print, Embossed, Embroidered)
  • Thread Color: Select (only show when "Embroidered")
  • Embroidery Position: Select (only show when "Embroidered")

Conditional Logic:

If "Print Style" = "Embroidered"
→ Show "Thread Color" and "Embroidery Position"

If "Print Style" = "Regular Print"
→ Hide "Thread Color" and "Embroidery Position"

If "Print Style" = "Embossed"
→ Hide "Thread Color" and "Embroidery Position"

Note: Since only equals operator is available, you need to create separate conditions for each value instead of using OR logic.

Condition Operators​

Available Operator:​

  • = (Equals): Exact value match only

Note: XB Product Options currently supports only the equals operator for conditional logic. This means you can only create conditions that show/hide options when a specific value is selected.

How it works:​

  • If [Option A] = [Exact Value] → Show/Hide [Option B]
  • The condition triggers only when the selected value exactly matches the specified value
  • Case-sensitive matching for text values

Design Tips for Effective Logic​

✅ Simplicity Principle​

  • Start with simple logic (equals only)
  • Create separate conditions for each value
  • Test each condition carefully

✅ Clarity Principle​

  • Use clear option names
  • Clear condition values
  • Logical actions

✅ User-Friendly Principle​

  • Don't hide important options
  • Provide clear guidance
  • Show notifications when needed

Handling Common Issues​

❌ Options not showing/hiding correctly​

  • Check condition option names
  • Check condition values match exactly (case-sensitive)
  • Check condition is set to "equals" only

❌ Logic too complex​

  • Break down into simple conditions (equals only)
  • Create separate conditions for each value
  • Use Groups for organization
  • Test step by step

❌ Customers confused​

  • Add clear instructions
  • Use Summary to explain
  • Test with real users

Best Practices​

🎯 Design by User Flow​

  1. Identify customer journey
  2. Design conditions by flow
  3. Test with different scenarios

🎯 Use Groups Effectively​

  • Group related options
  • Hide/show entire groups instead of individual options
  • Reduce complexity for customers

🎯 Provide Feedback​

  • Show notifications when options change
  • Explain why options show/hide
  • Guide next steps

Do you need guidance on setting up conditional logic for any specific case?