Settings / Design

Design

Last Updated: 3 months ago

There are 3 different ways you can customize the look of your store.

Layout

This is how your menu will be displayed.

Grid Layout
This layout uses your dish images
grid-layout

List Layout
This layout will not use dish images and is best if you do not have images for your dishes
list-layout

Colors

desing-settings

You can customize all the colors in your store. All color values can also be set with transparencies. Certain areas of the store use shades or inverses of the colors you select. Selecting lighter colors will give darker shades and dark colors give lighter shades.

While the number of color options may seem confusing, you can customize your store relatively easily by selecting one of our light or dark themes. Then set the primary color to your main brand color as this is going to be what makes your store unique.

Images

order-page-header

You have the option to set a background, menu header and logo image.

Background
The background is used throughout your store pages and will overwrite the background color. Your background image should be no more than 200kb. With your background image, you have the option to use either a single large image or a repeatable pattern such as the ones found here http://thepatternlibrary.com/.

If using a pattern, make sure to leave the stretch background option disabled. Otherwise, make sure to enable it as it prevents the background image from repeating on large screens and instead will fit it to the user's screen.

Menu Header
The menu header image is the image covering the main top section. This should be 1000px x 440px and no more than 250kb.

Logo
Your logo is shown on top of the menu header image. If you do not upload a logo, your restaurant name will be displayed in text. Your logo will also be used on your online payment checkout if enabled.

Your logo should be 200px x 200px and no more than 100kb.

Dish Images
Every dish can contain one image. This should be no more than 150kb. Ideally it is only 30-50kb and is 600px x 400px in size. Any 3:2 ratio image will work well.

Optimizing Images

We recommend using any free image optimization tool such as to reduce your image file sizes to the minimum possible. This enables your store to load much faster.

You can try https://tinypng.com/ which is an online tool, or http://luci.criosweb.ro/riot/ which must be downloaded.