Back to Olo.com

Menu Image Management Overview


**Adding your 2560x373 category images for our new responsive platform, Serve?**

Please scroll down to the "Image Groups" and "Important - Category Image Uploads & Image Overrides" sections for more information

 

Menu Image Manager Overview 

The Menu Image Management (MIM) tool on the Dashboard for users with the MIM permission enabled. Not all brands will have access to the MIM tool. Please submit a request from the Olo Help Center home page if you do not see the Menu Images tab and we will work with you to get your brand over to the new MIM tool!

If you are using Rails: Olo can host your images through Menu Image Manager that can display on your Rails partners' platforms as well. Please submit a request through the Olo Help Center for a Rails Specialist to help configure these settings for you.



The tool allows the user to upload and select images for assignment to menu items so that these images display to customers on the menu pages. Once an image has been assigned to a menu item and published, it will display for that item on the relevant customer-facing menus (e.g. Desktop web, mobile web, mobile apps).

To use the tool:

  1. Upload images to an image library
  2. Save image assignments for menu items
  3. Publish changes to customer-facing menus

Image Specs

Category Images

Accepted file types: .png, .jpg
Note: Any text on the category image must match the exact name of the category in order to be ADA compliant.

  • Current Desktop: 1536x512px, but existing 500x138px will also still work here. 
  • Future Desktop: 2560x373px*
  • Mobile Web: 1536x512px
  • Mobile App: 1200x800px

*These images will appear on the Desktop viewport once we migrate to our new responsive platform later this year. You may start uploading these image sizes to the Category [Serve: Desktop & Tablet] image group to prepare for this. More information on image groups can be found in the "Image Groups" section below.

Product Images

Accepted file types: .png, .jpg

  • All platforms: 1200x800px

Please review our Style Guide for more image requirement details.

Image Library

The Image Library is a repository of all of the image files used by a brand for menu images.

Adding Images to Library

Users can drop files onto the upload square or click the square to select files from their computers.


Only certain image file types are allowed by the uploader (.png, .jpg).

The minimum size requirements for images is set per brand, according to their customer-facing menu design requirements. Images that are below the minimum size will fail with an error message that the image is too small. Large images can be scaled down automatically by the Olo system to fit smaller requirements, but not vice versa.

Editing Images in Library

To help with organization, users can edit the filename for any image uploaded to the Image Library. Users can also delete any image from the Library, as long as that image has no menu item assignment. If the image is currently assigned to a menu item, the DELETE option will not be visible.



Finding Images in Library

Users can find images using a text-match filter at the top of the Image Library. Users can also sort the Library list by these criteria:

  • Newest (uploaded most recently)
  • Oldest
  • A - Z
  • Z - A

Currently, users cannot create folders for groups of images in the Image Library or filter images by whether they have already been assigned to a menu item or not. Olo would like to add these features soon.

Assigning Images to Menu Items

The primary utility of the MIM tool is the assignment of images to menu items, such as categories or products, so that the selected images display on customer menus across the various platforms (desktop web, mobile web, apps, etc).

In the tool, users can view a treeview presentation of the brand’s menu data taken from the Menu Admin tool. Here, the user can select one or more categories or products to assign to an image. The user cannot select both category menu items and product menu items for assignment at the same time.

A user can assign the same image to multiple categories or products at the same time, but a user cannot assign multiple images to multiple different menu items at once.

Please see "Category Image Uploads & Image Overrides" section below for important information on category image assignments specifically.



Important - Save vs. Publish

The MIM tool allows users to save assignment work in progress before those changes are reflected to customers. No modifications to menu image assignments will be seen by customers until the Publish step has been taken by the user. Each menu assignment must be saved. As soon as an assignment is saved, the preview thumbnails and preview images within the MIM tool will reflect the latest saved assignment.


Previewing Images

While saving image assignments, users can see preview images. These previews show the image selected, scaled to the output for each image depending on where it appears on the platform.

MIMpreview.png

Image groups

Image groups are defined as the different places where a customer will see the image when interacting with the menu, across our platforms: Desktop, Mobile, and App. Each image group has a set of sizing rules to scale the image as required. For example, on the desktop view, there is a small version of the image for the menu thumbnails (“Product - Menu [Serve]”), and a larger version of the image for the customize modal (“Product - Detail [Serve]").

Any brand on the Olo platform can have these image groups assigned:

Serve (Responsive Platform) Image Groups:

• *Category [Serve: Desktop & Tablet]
           *Note: this will not be visible on desktop until your brand migrates to the new Serve platform. The 3 images groups below are currently visible on your mobile web page.
• Category [Serve: Mobile]

• Product - Menu [Serve]
• Product - Detail [Serve]

Legacy Olo Desktop (current desktop site if you’re not on Serve) Image Groups:

• Category [Legacy Desktop]

• Product - Menu [Legacy Desktop]
• Product - Detail [Legacy Desktop]

Mobile App Image Groups:

• Category [Mobile App]

• Product - Menu [Mobile App]
• Product - Detail [Mobile App]

Image groups can be turned off by a Customer Success Manager or Front End Specialist if the group is not utilized by the brand. When an image group is turned off, the brand will simply no longer see the preview images for this image group.

 

Important - Category Image Uploads & Image Overrides

More information on Category Overrides:

Each category image for desktop, mobile web, and mobile app has different dimension requirements. Please review our Style Guide, or the "Image Specs" section above for category image dimension requirements for each of these platforms. 

With the Override function, we have the ability to add these different image files to each image group within the selected menu category.

First, the user assigns an image for the category menu item, such as the 1536x512 category image, since that can be used for both current Category [Legacy Desktop] and Category [Serve: Mobile]. Second, in the preview step, the user can click “Override Image” for the exception image group (e.g. “Category [Serve: Desktop & Tablet]") and select the 2560x373 image uploaded for this specific image group. Once the user saves, the overridden image group will receive a different assignment than the rest.

If you have an Olo app, you can do this once more for the 1200x800 image needed to be assigned for the  Category [Mobile App] group.

MIMCategoryOverrides.png

 

All product images across our platforms have the same 1200x800 dimensions, so using this override tool is not required for product photos. However, you can still use the override function to upload one 1200x800 product photo to desktop, and a different 1200x800 product photo to mobile, if desired. 

Publishing

When the user clicks Publish and confirms, all of the saved assignment changes will be pushed to the live Olo platform. These changes will be reflected to customers within approximately 5 minutes or less. If a mistake is made, the user can simply save new changes and Publish again immediately.

Using Menu Image Manger to build off of Olo's API

Brands and/or Agencies are able to add images by using MIM and then call our API to get the image IDs and Image specs to build off of the data in our system. The API provides each image per platform that brands can use however they'd like.

Didn't find what you need?

Submit a request to our Help Team and someone will
get back to you shortly.

Submit a request

Copyright © 2020 Olo. All rights are reserved.