How to set up Conditional logics?

🎯 Objective

Conditional Logic allows you to show or hide product options dynamically based on your customer’s selections. The goal is to create a clean, intuitive, and user-friendly product configuration experience ✨

How Visibility works

Conditional logic is called Visibility in the editor. You will find it in the Display tab of every option, and in the Display tab of a group.

1. Open the option (or group) you want to show or hide and go to the Display tab.

2. Under Visibility, click Add condition.

3. Choose Show or Hide, and whether all or any of the conditions must match. The sentence reads, for example: "Show this option when all of the following conditions match".

4. For each condition, choose:

   • Option - the option whose answer controls this one.

   • Condition - is, is not, contains or does not contain. When the controlling option is a Number field, use is, is not, less than or greater than.

   • Value - the value to compare with. For options with a list of values (Dropdown menu, Radio button, Checkbox, Button, Swatch and so on) pick a value, or Any value to match as soon as the customer selects something. For Text box, Text area, Number field and Email options you type the value.

5. Add more conditions with Add condition, then click Save.

• The option set needs at least two options, because an option cannot be controlled by itself.

• File upload, Date & time, Color picker, Paragraph, Heading, Divider and Pop-up modal options cannot be used as the option that controls others. They can still be shown or hidden by other options.

• Conditional logic is an Advanced feature. On the Free plan you can use it on one product with a Premium option set. See Plans and feature availability.

Example 1: Text vs. Image for Embroidery

Imagine selling a custom T-shirt where customers choose between adding Text or an Image for embroidery.

✅ If they choose Text, they’ll see a textbox to type in.

✅ If they choose Image, they’ll get a file upload option instead.

Here’s how to set it up

1️⃣ Create a radio button with “Text” and “Image” options.

2️⃣ Add a textbox for text input.

3️⃣ Add a file upload for images.

4️⃣ Navigate to the Display tab > Add condition:

5️⃣ Set up Conditional Logic to show only the relevant option based on their selection:

• For the Textbox: Show this option when 'Customize T-shirt' is 'Add text':

• For the File Upload: Show this option when 'Customize T-shirt' is 'Add image':

Now, customers only see what they need—keeping things clean and intuitive!

Example 2: Number of People & Textboxes

Let’s say you offer a T-shirt where customers can add names based on how many people they select.

✅ If they pick 1 person, they get 1 textbox.

✅ If they pick 2 people, they get 2 textboxes.

✅ If they pick 3 people, they get 3 textboxes.

Here’s how to set it up

1️⃣ Create an option with “1 person”, “2 people" and "3 people"

2️⃣ Add 3 textboxes for name input.

3️⃣ Use Conditional Logic to:

• Show Textbox 1 for all 3 choices - because this Textbox 1 will appear on “1 person”, “2 people" and "3 people" selections.

• Show Textbox 2 when "2 people" and "3 people" are selected - Because the second textbox will only appear for these 2 selections:

• Lastly, show Textbox 3 when "3 people" is selected:

Now, the form updates dynamically, keeping it simple and user-friendly!

And that’s it! Conditional Logic ensures customers only see what’s relevant - making their shopping experience smoother. Try it out and let us know how it works for you!