Swatches
Using Conditional Logic with Swatches
This page covers two practical examples of how to use Conditional Logic with swatches in Infinite Options. If you haven't read the main Conditional Logic guide yet, start there first: Conditional Logic
Before you start
The same rules apply here as with any Conditional Logic setup:
All fields must be inside the same Option Set. Think of an Option Set as a group. Everything in that group can talk to each other. Fields in different groups cannot.
Conditional Logic can only be triggered by another option field you created in Infinite Options. It cannot be triggered by a Shopify variant like size or color.
What we're covering
This page walks through two different setups:
Scenario 1: A swatch triggers a text field. When a shopper selects a specific swatch value, a text field appears asking for more information.
Scenario 2: A checkbox triggers a swatch field. When a shopper checks a box, a set of color swatches appears for them to choose from.
You only need to follow the scenario that matches what you're trying to build.
Scenario 1: Show a text field when a swatch value is selected
In this example, a store sells personalized products with different font options displayed as swatches. When a shopper selects a font swatch, a text field appears asking what they want written in that font. If they select a different swatch, the text field stays hidden.
Step 1: Create your swatch field
In your Option Set, create your first option field and set the Input Type to Swatches. Add your swatch values, in this case the different font options.
Step 2: Create the text field
Click Add Another Custom Field to add a second option field inside the same Option Set. Set the Input Type to Text.
This is the field that will appear when a shopper selects a specific swatch. Give it a clear label like "What would you like written in this font?"
This field will stay hidden until the right swatch is selected. You'll connect them in the next step.
Step 3: Connect the text field to the swatch field
At the bottom of the text field you'll see a link that says Show Advanced Options. This is where the Conditional Logic settings live. Click it and a few extra fields will expand below, including the one we need.
Then click Create a new conditional rule. Don't worry if this looks unfamiliar, there are only three fields to fill in and we'll walk you through each one.
Field Name: Click the dropdown and select your swatch field. This tells Infinite Options which field it should be watching for the trigger.
Operator: Select Contains. This is the safest choice because it works even if capitalization isn't exact.
Value: Type the exact swatch value that should trigger the text field, for example, "Script."
That's it. You just told Infinite Options: when someone selects this swatch value, show the text field.
Step 4: Save and test
Click Save Changes at the top of the Option Sets page.
Then go to your product page and try it out. Select the swatch value you used as the trigger and check that the text field appears. Select a different swatch and check that it disappears.
If it works the way you expected, you're done. If something looks off, the troubleshooting section at the bottom of this page will help you sort it out.
Scenario 2: Show a swatch field when a checkbox is selected
In this example, a shopper is asked whether they want their case in a different color. If they check yes, a set of color swatches appears. If they leave it unchecked, the swatches stay hidden.
Step 1: Create your checkbox field
In your Option Set, create your first option field and set the Input Type to Checkbox. Give it a clear label like "Would you like to choose a different color?"
This is the trigger field. When a shopper checks this box, the swatch field will appear.
Step 2: Create the swatch field
Click Add Another Custom Field to add a second option field inside the same Option Set. Set the Input Type to Swatches.
Add your color options as swatch values. You can upload images or pick colors for each one.
This field will stay hidden until the shopper checks the box. You'll connect them in the next step.
Step 3: Connect the swatch field to the checkbox
At the bottom of the swatch field you'll see a link that says Show Advanced Options. This is where the Conditional Logic settings live. Click it and a few extra fields will expand below, including the one we need.
Step 3: Connect the swatch field to the checkbox
At the bottom of the swatch field you'll see a link that says Show Advanced Options. This is where the Conditional Logic settings live. Click it and a few extra fields will expand below, including the one we need.
Then click Create a new conditional rule. There are only three fields to fill in.
Field Name: Click the dropdown and select your checkbox field. This tells Infinite Options which field it should be watching for the trigger.
Operator: Select Contains. This is the safest choice because it works even if capitalization isn't exact.
Value: Type the exact value of the checkbox that should trigger the swatches, for example "Yes."
That's it. You just told Infinite Options: when someone checks this box, show the swatch field.
Step 4: Save and test
Click Save Changes at the top of the Option Sets page.
Then go to your product page and try it out. Check the box and confirm the swatches appear. Uncheck it and confirm they disappear.
If it works the way you expected, you're done. If something looks off, the troubleshooting section below will help you spot the issue.
Something not working?
The field isn't showing up when I select the right value. Start by checking two things: first, that both fields are inside the same Option Set. Second, that the value you typed in the rule matches your swatch or checkbox value exactly. Even a small difference like "script" vs "Script" can cause it to stop working. If both of those look right, make sure the rule is using Contains as the operator.
A field is showing up when it shouldn't. Go back into the rule and check the Field Name dropdown. It's easy to accidentally select the wrong field. Make sure it's pointing to the field you actually want as the trigger.
Everything looks correct but it's still not working on the product page. Check that the Option Set is assigned to the right product and that you hit Save Changes before testing. If you've checked both and it's still not working, reach out to support and we'll walk you through it together.
Last updated