Wix Restaurants: Customizing the Mobile View of your Orders App
3 min read
Important:
- This article is about the original Restaurants Orders app.
- We've released a new online ordering app. Learn how to add and set up the new Wix Restaurants Orders (New) app.
Customize the look of your Wix Restaurants Orders app on mobile, and choose what to show customers about your menu and dishes. The app has built-in responsive features, so it's already designed to look ideal on every screen size. You can adjust the layout and design to make your menu stand out on mobile where it needs to.
Before you begin:
Make sure that you've added Wix Restaurants Orders app to your site.
Important:
The desktop and mobile versions of your site represent different viewing modes of the same site; they are not separate sites. Changes to your desktop site affect your mobile-friendly site, while changes to your mobile site do not affect your desktop site.
In this article, learn how to:
Changing the layout of your Orders app on mobile
Change the layout of your Wix Restaurant Orders app on mobile - without affecting the desktop version.
To change the layout for mobile:
- Access the mobile Editor.
- Go to the page that includes the Order Online app.
- Click the Order Online app in the Editor.
- Click Settings.
- Click the Layout tab.
- Click the General tab.
- Customize the layout using these options:
- Menu description: A general description of your menu.
- Section image: Images for each section in your menu (e.g. appetizers, desserts, etc.).
- Section description: A description for each section in your menu.
- Alignment: Choose how to align the content: Left, Center, or Right.
- Section image height: Drag the slider to adjust the height of the section image on your menu.
Changing the layout of your dishes on mobile
Customize the look of your dishes on your Orders app on mobile. Choose whether to display an image, a description and special dish labels for each dish (e.g. spicy, vegan, etc.).
To change the dish layout for mobile:
- Access the mobile Editor.
- Go to the page that includes the Order Online app.
- Click the Order Online app in the Editor.
- Click Settings.
- Click the Layout tab.
- Click the Dish tab.
- Customize the layout using these options:
- Dish image: An image of each dish.
- Dish description: A general description of each dish.
- Dish label: Special dish labels for each dish (e.g. spicy, vegan, etc.).
- Choose a page layout for your dishes:
- Strip: Displays menu items in a list with small images of the dishes beside the description.
- Card: Displays menu items in cards with large images of the dishes above the description.
- Corner radius: Drag the slider to adjust the corner radius of the dish images.
- Space in between the cards: Drag the slider to adjust the space between dishes.
Setting the text size for mobile
Adjust the size of text for mobile and make your text stand out where it needs to - without affecting the desktop version. You can adjust different titles, descriptions and menu tabs for your restaurant's mobile view.
To set the text size for mobile:
- Access the mobile Editor.
- Go to the page that includes the Order Online app.
- Click the Order Online app in the Editor.
- Click Settings.
- Click the Design tab.
- Drag the sliders to adjust the size of the following text:
- Menu title: The title that appears at the top of your menu.
- Menu description: The description of the menu.
- Section tab: The tabs at the top of the Orders app.
Note: If you have different sections within a menu section, you'll have tabs for them at the top. - Section title: The title that appears at the top of a menu section.
- Section description: The description of a menu section.
- Dish title: The title that appears for your dishes.
- Dish description: The description of a dish that appears below dish title.
- (Optional) Click Reset to original design to restore the original design of your text.
Did this help?
|