Product Image Requirements

Image Requirements are used as a guideline for Users of a white label product. These guidelines may be useful in the process of creating: 

• Items
• Combos 
• Modifiers
• Discounts
• News

Items

Item images help users navigate through the Menu and help you give the best representation of your Items.

One Item can only have one image. It is displayed in multiple places across the ecosystem and it may be cropped depending on where the Item is being displayed. These guidelines will help you position the image correctly.

DO:

• Use background in white or color to make the visuals stand out 
• Use professional photographer if you can 

Our research shows that the majority of Users appreciate good looking images, and use it in decision making and a significant percentage of users base their decision solely on the displayed image.

Example of Item image:

Image requirements: 

Image size: 1200x800px

Visible area: 

Menu and Subcategory screen: 800x800px

Item screen - visible part on phones with notch: 1200x700px

Combos

Combo images help with an up-selling to a Combo and customizing.
The image must show main Combo Item and should show default Combo Items that User can order. Combo is presented with one image per Main Item. These guidelines will help you position the image correctly.  

DO:

• Use background in white or color to make the visuals stand out 
• Use professional photographer if you can
• Select carefully which Items you’ll show together with the main Item in Combo. 
• Show default Items in Combo image

Our research shows that 92% of Users expect to get what is seen in the image. Also, 36% of Users assume that they’ll be able to make a custom selection of Items in a Combo.   

DON'T:

• Show Items that aren’t in Combo
• Show Items in a group where only one can be selected

Example of Combo Meal image:

Image requirements: 

Image size: 1200x800px

Visible area: 

Combo layover: 800x800px

Item screen - visible part on phones with notch: 1200x700px

Combo Clusters

Combo Cluster represents a "container" for Combos and Items to be combined into a separate Combo Meal. Multiple Combos can be assigned to one Combo Cluster. 
Combo Cluster images help with an up-selling and customizing. The image should show Combo Meal and the Main Item and/or any other Item that is in the Cluster. 

DO:

• Use background in white or color to make the visuals stand out 
• Use professional photographer if you can
• Select carefully which Combos/Items you’ll show together within a Combo Cluster. 
• Show default Items/Combos in a Combo Cluster image

DON'T:

• Show Items that aren’t in a Combo Cluster
• Show Items in a group where only one can be selected

Image requirements:

Image size: 1200x800px

Visible area: 

Combo Cluster layover: 800x800px

Item screen - visible part on phones with notch: 1200x700px

Modifiers

Modifiers are modifications or add-ons ordered as part of an Item. Images should represent a single Modifier and help User scan through the list of Modifiers and perform a quick selection. Modifiers should be single add-ons like: 

• Toppings 
• Spices 
• Additional ingredients 
• Full Items 

Good visual representation of Modifiers improves User’s ordering experience. Use these guidelines to correctly position Modifiers in a Modifier Image.

DO:

• Modifier Images should have a white background for a User to be able to scan quickly through possible Modifiers

Example of Modifier image:

Image requirements: 

Image size: 1200x800px

Visible area: 

Item screen: 800x800px

Images for Discounts (Coupons, Promotions and Rewards)

Your app may have Coupons, Rewards, Promotions or all three and their images should follow the same set of guidelines. One image represents the Discount in all the places where the Discount is displayed (in the list of all available Discounts and the Discount preview or editing section). 

Use guidelines to correctly position  elements of the Discount in the Discount Image. 

DO:

• Feature Items and Combos that the Discount applies to
• Use background color but avoid using white or light colors: If white or light color is used for a background, don’t use any text in the Coupon Image
• Use text for Discount images if possible: The text should emphasize the value of the Discount for the User (e.g. the prize or the Discount amount) 

DON'T:

• Overlap the text and Items in Discount Images as it reduces readability
• Use a small text size on Discount Images: It needs to be readable in the list of Discounts where the Image is shown in a smaller format 
• Include a disclaimer text in an image unless specifically advised by your counsel: Discount preview screen has a designated area that can include a legal disclaimer text          

Example of Coupon image:

Example of Promotion image:

Example of Reward image:

Image requirements: 

Image size: 1200x800px

Visible area: 

Coupon/Reward preview - visible part on phones with notch: 1200x700px

Coupon/Reward screen: 1200x800px

News:

News images visually summarize topics of News articles. Articles are displayed in form of a list with image in the article header. 

Use these guidelines to correctly position elements in a News article image. 

DO:

• Visually saturated graphic, colorful and features a text snippet from the article 
• Be careful with the text dimension

DON'T:

• Use white background for News images

Our research shows that users are highly interested in the News about the Offers, Campaigns and new Items, which provides a direct benefit to them. They don’t engage in corporate News.     

Example News image:

Image requirements: 

Image size: 1200x800px

Visible area: 

News article - visible part on phones with notch: 1200x700px

Home screen and News screen: 1200x800px

Text on Images:

If you want to include text on your images (offer, reward, news …) take into account the safe areas shown on the image below. On some phones, the notch can overlap text. Also, you should not put the text below the close button which is located on the right.