This guide is a detailed reference for creating a professional coffee shop menu. Have a look at the showcase we have created - https://fastw3b.net/foodmenu/showcases/coffe-house.html
It allows for:
Clear and concise menu presentation.
Two columns menu display.
Breaking menu positions into categories and subcategories.
Setting varied pricing with regard to portion sizes.
Flexible labeling of menu positions.
Setting promo options.
We will describe the process for creating such a website in the following order:
Breaking your menu positions into categories and subcategories is important for a clear and easy-to-read menu. To create a website similar to the showcase we have created, do the following:
To learn how to create and configure meal categories, review Categories tutorial.
Once the categories are created your Categories section in the admin panel will look similar to the screenshot below.
The categories won’t be displayed without meals. To learn how to add and configure meals, review Meals tutorial. The overall process for adding a meal to the category looks as follows:
Locate meal settings.
Specify the title of the meal.
Choose the category it belongs to.
Upload the image.
Set promo options if it is needed to make it stand out from other menu positions. We have set promo options for each category:
To learn more about promo options configuration and settings, review How to configure promo options tutorial.
Add as many meals to each category/subcategory as you need. After you are done, your screen should look similar to the screenshot below.
As soon as categories/subcategories are created and meal positions are added, it is time to display the menu on the front-end. The categories are displayed via FW Food Menu Layout. By configuring the layout options you can change the way the menu will be displayed. Thus, by configuring the Menu Layout options you can create No images menu, Two columns menu, Single category menu, etc. In our coffee shop showcase, we have displayed a single category via Menu Layout - Teas category. To learn how to do this, repeat the steps below:
Create Coffee Shop menu item.
Assign Menu Layout to the menu item.
Configure Menu Layout settings as follows:
To learn how to display and configure a category using Menu Layout, review Menu Layout tutorial. Once the menu item is configured, check the front-end.
You can display your menu via FW Food Menu Meal Category module. In the coffee shop showcase, we have displayed Coffee and Desserts categories via the Meal Category module. To learn how to do this, follow the steps below. First, let’s display Coffee category in the Category module.
To learn how to display and configure Meal Category module, check out Meal Category tutorial.
Once the module settings are configured and saved, go to the front-end to see how it is displayed.
Now, let’s display Desserts category with subcategories in the Meal Category module. Repeat steps 1-2 outlined above. However, this time choose Desserts category instead of Coffee category. Set module settings as is shown in the screenshots below:
Once the module settings are configured and saved, go to the front-end to check the result.