Dropdown menus
Using Conditional Logic with Dropdown Menus
This page walks through a real example of Conditional Logic using dropdown menus. If you haven't read the main Conditional Logic guide yet, start there first: Conditional Logic
What is a sub-menu and why would I want one?
A sub-menu is just a dropdown that appears after a shopper makes a choice in another dropdown.
Here's the idea in plain terms:
You sell phone cases. When a shopper picks "Android," you want to show them a list of Android models. When they pick "iPhone," you want to show them iPhone models. You don't want to show both lists at the same time because that's confusing and most of the options won't apply to them.
That's exactly what this setup does. The shopper makes a choice, and the right options appear. Everything else stays hidden.
Before you start
A few things to know before you build this:
All of the fields you connect with Conditional Logic 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 that you created in Infinite Options. It cannot be triggered by a Shopify variant like size or color.
If either of those things is new to you, read the main Conditional Logic guide before continuing.
What we're building
We're going to set up a phone case product with three dropdowns:
Phone Type: Android or iPhone. This is the first choice the shopper makes.
Android Model: Samsung or Google. This only appears if they chose Android.
iPhone Model: Your iPhone options. This only appears if they chose iPhone.
At the end, we'll also show you how to add one more level, so that choosing "Google" under Android Model reveals a list of Google devices.
You don't have to build all of it. Start with the first two steps and you'll already have something that works.
Step 1: Create your first dropdown
Open your Option Set in Infinite Options and create your first option field. Set the Input Type to Drop-Down Menu.
In our example this field is called "Phone Type" and has two values: "Android" and "iPhone." This is the field the shopper will see first. Their choice here is what controls everything else.
Step 2: Create the Android Model field
Click Add Another Custom Field to add a second option field inside the same Option Set. Set the Input Type to Drop-Down Menu.
Call this field "Android Model" and add your Android values, like "Samsung" and "Google."
This field is going to stay hidden until a shopper picks "Android" in the first dropdown. You'll set that up in the next step.
Step 3: Connect the Android Model field to the Phone Type field
At the bottom of the Android Model field, click Show Advanced Options. Then click Create a new conditional rule.
Set up the rule like this:
Field Name: Phone Type
Operator: Contains
Value: Android
That's it. You just told Infinite Options: only show the Android Model field when someone selects Android in the Phone Type field.
Step 4: Create the iPhone Model field and connect it
Add another option field inside the same Option Set. Call it "iPhone Model" and add your iPhone values.
Click Show Advanced Options at the bottom of that field, then Create a new conditional rule. Set it up like this:
Field Name: Phone Type
Operator: Contains
Value: iPhone
Now the iPhone Model field will only appear when someone selects iPhone. The two sub-menus will never show at the same time.
Step 5: 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 Android and check that the Android Model dropdown appears
Select iPhone and check that the iPhone Model dropdown appears
Switch back and forth and make sure only the right one shows each time
If it's working, you're done. If something isn't showing up the way you expected, check the troubleshooting section at the bottom of this page.
Want to go deeper? Add a cascading sub-menu
This part is optional. If your basic sub-menus are working and you want to add another level, here's how.
In our example, when a shopper selects "Google" under Android Model, we want a third dropdown to appear showing specific Google device models.
Add another option field inside the same Option Set. Add your Google device values.
At the bottom of that field, click Show Advanced Options, then Create a new conditional rule. Set it up like this:
Field Name: Android Model
Operator: Contains
Value: Google
Notice that this rule points to Android Model, not Phone Type. Each level in the chain points to the field directly above it.
You can keep adding levels this way as many times as you need. Each new field just needs a rule pointing to the one above it.
Something not working?
A dropdown isn't appearing when I select the right value. The most likely cause is that the fields are not in the same Option Set. Check that every field involved is inside the same Option Set. Also make sure the rule is using Contains and that the value you typed matches the dropdown option exactly, including spacing.
The wrong dropdown is appearing. Check the Field Name in each rule. It's easy to accidentally point two rules at the same field. Each sub-menu should have its own rule pointing to its own trigger field and value.
The cascading level isn't working. Make sure the second-level rule is pointing to the correct field. In our example, the Google devices rule points to Android Model, not Phone Type. Each rule in the chain points to the field directly above it, not back to the top.
I set everything up, but nothing is working at all. Go back and confirm that the Option Set is assigned to the correct product and that you saved your changes. If everything looks right and it's still not working, reach out to support, and we'll take a look.
Last updated