The formation group/tab view allows for a product flow that lets you present multiple modifier groups in a single view, reducing the amount of scrolling on the menu. The tab view also allows for order accuracy, as the customer is able to review the product with ease. Please note that the formation groups/tabs look different on existing sites, and the examples below are based on the new responsive design.
Based on the example below, the customer can easily go between the tabs and modify their order.
Examples to review:
- Entree Examples > refer to the Penne Pasta item and select the "Yes, Customize!" option towards the end of the product.
- Sandwich and Burger Examples > refer to the BYO Sandwich item and select the "Pick Ingredients" option once you make the size selection.
- Pizza and Wing Examples > refer to the Pizza/Wing Combo item and select the "Customize Right/Left" option under the "Choose Customizable 2nd Pizza" option.
Steps to Setting Up Formation Groups/Tabs
Step 1: Create modifier groups based on the desired formation group/tab headings.
The modifier choice within each group will form the heading that appears as the names of the tabs on the front end.
Steps to Follow
- Create modifier groups based on the number of formation groups/tabs you would like to have, and enter a single modifier choice in each modifier group, and have the names of the modifier choices reflect the names that should appear on each tab (as shown in the image above).
- Set the modifier settings of each group as follows, under the "How many modifiers can the customer select from this group?" option
If customers are required to make a selection from a tab, set it to “single”.
If customers are not required to make a selection from a tab, set it to “multiple" and "unlimited". This way, customers are not forced to make a selection from a tab, if, for example, the tabs just contain optional choices the customer can make.
- If you are a brand with stores that are POS integrated, each of the modifier choices in the modifier groups should be mapped to the "none" entity type, unless there is a POS ID you would need to enter at this level, to meet POS requirements. If you would like menu mapping instructions, refer to the various mapping articles listed here.
Step 2: Add metadata to each of the newly created modifier groups.
The metadata that is entered will help form the formation groups/tabs on the front end menu. Metadata needs to be added to the modifier groups that were created in step 1 above.
Steps to Follow
- On the modifier group overview screen, click on the metadata tag icon.
- Select the "+ Add Metadata" option.
- Enter the metadata key/value pair outlined below.
Key: “modgroup-formation-name” (the key entry stays the same for each modifier group)
Value: “1st” (the value entry should be a sequential number, based on the order of the tabs. In this case, the second modifier group would get the value "2nd", the third would get "3rd" and so on)
- Hit "save" at the bottom of the metadata screen in order to save the metadata entry.
Step 3: Nest desired modifier groups under the "tab" modifier choices.
These nested modifier groups will contain the options that customers can select from each of the tabs.
Steps to Follow
- Select the "choice modifiers" option on the tab modifier choices
- You can either create a new modifier group(s) that contain all of the choices you would like to present to the customer or reuse any existing modifier groups.
- If you are a brand with stores that are POS integrated, each of the modifier choices within the nested modifier groups should be mapped to some entity type. None of the modifiers should be left with "no mapping set". If you would like menu mapping instructions, refer to the various mapping articles listed here.
- Repeat points 1 and 2 for the rest of the formation groups/tab modifier choices.
Step 4: Add the product to the store menu
Add the product that contains the formation group/tab setup to your demo store menu so that you can review how the tabs appear on the front end. Refer to this article for steps on adding products to a store menu. Allow about 5 minutes for the tab setup to show up correctly on the front end menu.