Scanning and Sending from POS
Loyalty & CRM

Image Requirements

AppFront has 3 main platforms for online ordering that require images.

Recommended sizes will be described as [width(in pixels) x height(in pixels)] while you can provide larger size images with the similar ratio if not passing the size limit. Image resolution should be 300dpi.

The images you provide should not be larger than 1MB (images will be optimized for fast loading while maintaining quality) - the system would not upload them!

Supported Platforms

  • Native Apps (Android and iOS)

  • Desktop Web

  • Mobile Web (for mobile phones and tablets)

For Email campaigns, check out this guide.

General Recommendation

While different screens shows the images a bit different, our image algorithms knows how to always center the image based on the main object. We recommend to make sure that all images are taken as follows:

Images Guides

Image Centering

Centering image subject in the 1/3 center area of both axis is essential to prevent cropped main image parts, leave the rest of the image as empty as possible.

The image is used both for mobile phones and tablets therefore make sure you are centering image subject area accordingly:

[w/3 = image width / 3] and [h/3 = image height /3]

Home Page

You should select one of two variants for narrow screens: Split Layout or Full screen Background Image Layout .

Desktop version has Split Layout by default.

[from left to right]: Desktop, Mobile Split Layout, Mobile Full Screen Background Image Layout

Narrow Screens (width up to 840px):

Leaving empty areas surrounding your subject area is essential. This is done to prevent cropped image areas on various screen sizes.

Centering image subject in both axis is essential, else you might get the main thing you want your customers to fully see cropped.

Split Layout/Desktop Layout, Full Background Layout

Split Layout Image Size: 600 x 800 (you may use larger images with similar ratio)

Fullscreen Background Image Layout Image Size: 1000 X 1400

Desktop Layout Image Size: 1600 x 1400

Reminder - the image size cannot be more than 1MB!

Store Images

Store images are there to give your customers some sense of how your store looks like from the outside, and what they should expect to see when they come to pick up their food.

Store front image

Dimensions: 700 X 450

This will describe your menu layout, both for mobile and desktop

To see the full email campaign guide go here.

Displayed with your menu Items and your location details (phone number, address etc.).

Desktop Menu Header Image Size: 1200 X 300

Mobile Menu Header Image Size: 600 X 300

Reminder - the image size cannot be more than 1MB!

Make Sure images are centered to support most screen sizes

Menu Item Centered image example:

Centered Image Example

For Narrow screen layout you can choose from 2 variants of images layout for menu items. for desktop the default layout is image on top:

Menu Items Image Size: 1000 X 600

Reminder - the image size cannot be more than 1MB!

Toast POS: no need to upload menu items images; we pull them automatically from the POS.

Coupon Images

Coupons are shown on your mobile apps and website in the Rewards/Gifts section similarly to the way a menu item is shown. Therefore, they have almost the same requirements; see the guide above.

When styling your coupon text offer (if any), make sure that the text will be in the 1/9 center of the image in order to avoid cropping on some screen ratios.

Coupon Image Dimensions: 1000 X 600

Coupons will be shown in the following way in the apps and online ordering website:

Icons

You can send us icons to replace our default icons !

Make sure the icon will be in svg format, and only a few kilobytes. The icon should be 'fill' based (not 'stroke'). With this convention, we are able to color the icons according to the app-styles and view state. Also, unless you wish a specific color to be forced on an icon, please do not add any color. In order to convert an icon from stroke base to fill base, most of the illustration apps support Expand/Outline Stroke function. This function with the <add+> layers / merge layers function enable merging expanded stroke into one SVG path that can be colored. An example of the converted icon is attached.

Fonts

Please see here.

Mobile Apps Requirements

This section describes the design assets we need to upload Apps for the Android and Apple stores - apps cannot be created without these assets!

App Icon

General

Those are the stores requirements. Please notice that Apple might not approve the app if you are not following the guidelines

Size: 1024 X 1024

The icon should be in PNG format with no alpha layer (no transparency) and with no rounded corners.

Splash Screen (iOS and Android only)

Size: 750 X 1334px

Splash screens appear while native apps are launch.

Splash screen will be created automatically for all devices. Make sure that the brand or logo text is located in the main 1/9 of the image in order for it to scale well on all devices.

Splash screen should be treated as permanent. They are not for telling your customers about a new deal or discount, for that use the temporary splash screen that does not require an app update.

Example:

Reminder - the image size cannot be more than 1MB!

Campaigns

Email Campaign Images

Your customers are probably getting tons of marketing emails. A well thought out image will make your campaign stand out.

Centering image subject in the 1/3 center area of both axis is essential to prevent cropped main image parts, leave the rest of the image as empty as possible.

It is recommended not to write your main campaign or coupon offering on the margins because it might be cropped on some devices

Styling advice

Choosing an image with a transparent background generally results in a more aesthetic experience

Email campaigns template has the following appearance:

Email campaign image requirements

Dimensions: 1400 X 1000 (recommended)

File size: 400KB (max)

Styling advice

Try making the image pop out by creating a cool overlay shape on top of a transparent background. You can only use .png images for transparent backgrounds.