Conditional Logic for Sub-Menus
The conditional logic feature allows you to create many different use cases. This guide shows how to create sub-menus for a phone case product.
1. We'll start by creating an option set assigned to the phone case product. The first option created is to select the type of phone, Android or iPhone. We are using the Drop-Down Menu Input Type.
2. Next, we will create some options for the sub-menus. In this case, the sub-menus will be the type of Android and iPhone models to choose from. Click on the Add Another Custom Field button to create these in the same option set.
Shown below is the Android Model option with Samsung and Google option values:
At the bottom of the option, click Show Advanced Options to view additional settings, including Conditional Logic.
Let's set up conditional logic to only display the Android Model option if "Android" is chosen in the previous Phone Type option.
3. Once you click on Create a new conditional rule, you can set it up as follows:
The first field, Phone Type, "Phone Type", will automatically display when you click on the Label on Cart field. You'll then want to type out the exact value that you want the option to display on, in this case, Android.
4. You can then create another field and follow the same steps for iPhone.
In this situation, the conditional logic rule has iPhone set for the value.
To create a cascading sub-menu option, we can create another sub-menu for Google devices within the Android Phone Type option.
5. We would just need to add another option and set it up as follows:
Here, the conditional logic rule has Android Model, "Android Model" as the Label on Cart and Google as the value.
You can add as many cascading sub-menus as you'd like using conditional logic.
6. Save your changes.
Be sure to test out your options to make sure they work just right! 🎉