Menu option groups can be used to easily group modifier choices together, if they essentially refer back to the same main option, rather than listing out the options separately. In the example below, instead of listing out the options as “Remove Chicken from Left Half”, “Remove Chicken from Whole Pizza”, and “Remove Chicken from Right Half”, the choices were grouped together in a cohesive manner.
Menu option groups will display in the following manner on the new responsive design, also known as Serve:
Menu option groups will display in the following manner on Ghost:
Note: Once the metadata has been applied (see steps below), please allow for up to 5 minutes for the menu to display with the new configuration. Also, this setup is only applicable if you are working with an Olo UI. This will not work on a 3rd party owned interface.
Important UX Note Related to Serve (New Responsive Design)
The following variables will dictate how the modifier group will be displayed:
- If there are less than 3 choices, and if the names of the choices fit, Olo will show the segmented controls.
- If the names of the choices are large (i.e. don’t fit), Olo will show a drop down control. In the example below, the choice names are long due to pricing and calories displaying next to them, and therefore the options are presented as a drop down list.
- If there are more than 4 choices, we will show a drop down control. In the example below, customers are being presented with more than four options under Marinara Sauce, and therefore the options are presented as a drop down list.
Steps to Setting Up Menu Option Groups:
- Set up a modifier group as you normally would. Make sure to add the appropriate modifier choices as well. If you have an existing modifier group you would like to use, move on to step 2.
Tip: It may help to create the modifier choices using the bulk add modifier choice feature, and copy/paste all of the options from a spreadsheet.
Based on the previous example, the modifiers are entered as “Remove Chicken - left half”, “Remove Chicken - whole pie”, and “Remove Chicken - right half” so that we can differentiate between them.
- In order for the menu option groups to form on the front end menu, metadata needs to be entered into each modifier choice. In order to enter the metadata, click on the metadata button on the modifier choice.
- Click on the "+ Add Metadata" option.
- There are two metadata tags that need to be added to each modifier. Enter the "key" exactly as outlined below. The "value" would differ based on the verbiage you would like displayed on the front end menu.
a. Key: display-group-option-name | Value: [Modifier Name]
This determines the verbiage that is displayed on the left-hand side. For example, for the "Remove Chicken" modifiers, the value would be “Remove Chicken"
b. Key: display-group-name | Value: [Differentiator]
This determines the verbiage that is shown next to the checkbox. For example, for the "Remove Chicken - left half" modifier, the value would be “Left”. For the "Remove Chicken - right half" modifier, the value would be “Right”
- Hit Save at the bottom of the screen. Repeat the steps and enter the metadata values to all of the modifier choices within the modifier group. Once completed, wait a few minutes for the front-end to update.