Skip to main content

Web Design: Menu Settings (LB 2.0)

Written by Marija Golubovic

Overview

This article explains how Admin users can organize modifiers and set a menu disclaimer through the Admin dashboard. The Menu modifiers section controls how users move through required and optional modifier groups when customizing a menu item, and the menu disclaimer displays at the bottom of the menu page in the ordering platform and supports an optional hyperlink that directs guests to a page with additional information about company policies and procedures

Menu Modifier - modifier group behavior (new version)

In the Menu Modifier section, we can customize how guests navigate the required and optional modifier groups when customizing a menu item. First, we can choose whether to enable auto-scrolling. If the Enable Universal Auto-Scrolling is inactive, guests will have to navigate through the item page to complete required selections. Once we set this toggle to active, we can introduce a more intuitive experience:

  • Legacy Default:

    • Autoscroll fires only inside required modifier groups, guiding guests to complete required selections. Required groups nest to the top.

    • Once the last required group is answered, autoscroll stops. Optional selections don't trigger any scroll, so guests scroll manually to reach optional items.

    • It expedites the ordering experience and allows guests to add items to the cart with ease.

  • Total Guided:

    • The more advanced option, which takes guests through all modifier groups, required and optional. It extends the user journey through the item page and allows a more exploratory, in-depth experience of the modification options. Autoscroll is active for all groups. It starts in the Default groups and smoothly carries guests through the Optional groups until the end of the page.

  • These options are mutually exclusive, and to confirm our choice we must select the Save button.


Menu Disclaimer Configuration

Log in to the Admin dashboard,

Step 1: Select the Design> Web Design or Mobile App> Menu

Step 2: Scroll to the Menu Disclaimer section

Step 3: Set the Enable Menu Disclaimer toggle to active

Step 4: Add Menu Disclaimer Text

Step 5: Add the URL with additional details related to the menu disclaimer

Step 6: Select the Save button

IMPORTANT NOTE: Setting the menu disclaimer works in the same way on the web and apps. To set up the disclaimer for the apps, navigate to Design > Mobile App > Menu > Menu Disclaimer.

See the Aramark example

Formatting menu disclaimer text

If we need to format the text in the Menu disclaimer field:

  1. insert </p> at the beginning and at the end of each paragraph

  2. insert hyperlinks <a href="your desired URL" target="_blank">your desired text</a>

<p>This service is being provided to you by Aramark LifeWorks. Your information will be used for transactional purposes only, including confirming and tracking order status. Your information will not be shared with Nike. Your use of the service is subject to Aramark LifeWorks’ <a href="AramarkPrivacy Policy - Aramark" target="_blank">Privacy Policy</a> and <a href="AramarkTerms and Conditions - Aramark" target="_blank">Terms and Conditions</a>.</p>

<p>2,000 calories a day is used for general nutrition advice, but calorie needs vary. Additional nutrition information available by emailing [email protected]. For more on our allergen / no-wheat notice, please check here.</p><p>Note: Since everyone’s health history and nutritional needs are so different, please make sure that you talk with your doctor and a registered dietitian to get advice about the diet and exercise plan that‘s right for you.</p>


Nutritional Information Display settings

Nutritional Information settings control how nutritional information appears to guests on the item page. Two presentation versions are available: Basic and Advanced.

For now, we have the feature available on desktop, and soon it will become available on the mobile apps, too.

To manage the nutritional information display, we should:

Step 1: Navigate to Design> Web/ Mobile apps> Display Options and enable Display Nutritional Information. When this toggle is set to active, it will show nutritional details (calories) on menu-item pages and item-detail pages.

Step 2: Navigate to Design> Web> Menu Settings. Here we can choose one of the two options, which are mutually exclusive (only one can be active at a time):

  • Basic Nutritional Information is the current experience for showcasing nutritional values. Set toggle to active and select Save to save this setting.

  • Basic Nutritional Information allows users to select the Show Nutritional Info dropdown and view nutritional info for the item. To hide it, the user must select Hide Nutritional Info.

  • Advanced Nutritional Information brings up a different UI, with a dedicated Nutritional Information button at the bottom of the Item page.

  • Additionally, this option allows more customization, so the client can add a Nutritional Information disclaimer and URL to the page to learn more about nutritional information. When ready, select Save to save this setting.

  • On the ordering platform, we can select the Nutritional Information button. It opens a modal that displays size-based calorie values for the selected item and nutritional information, and if previously set, the disclaimer text and Nutritional Info URL

Dependency on Settings> Chains> Show nutritional information is coming soon!

Did this answer your question?