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:

1. Create meal categories and subcategories

2. Add menu positions to the meal categories

3. Display categories

4. Configure and display FW Food Menu Meal Category module

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:

1. Create 3 meal categories:

• Teas
• Coffee
• Desserts

To learn how to create and configure meal categories, review Categories tutorial.

2. Create subcategories for Desserts category. We have split Desserts category into subcategories to get a more structured view of the category. To learn how to create subcategory within a category, 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:

1. Locate meal settings.

2. Specify the title of the meal.

3. Choose the category it belongs to.

4. Upload the image.

5. Set promo options if it is needed to make it stand out from other menu positions. We have set promo options for each category:

• Special offer for Teas category.
• New offer for Coffee category.
• Meal of the day for Desserts category.

To learn more about promo options configuration and settings, review How to configure promo options tutorial.

6. Set varied pricing via the pricing grid.

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:

1. Create Coffee Shop menu item.

2. Assign Menu Layout to the menu item.

3. Configure Menu Layout settings as follows:

• Select categories: Teas
• Columns Qty: 2
• Display PDF button: Yes
• Display image: Yes
• Layout Design: Italian

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.

1. Locate Category module settings and configure them as follows:

• Select Categories: Coffee
• Columns Qty: 2
• Display PDF button: Yes
• Display image: Yes
• Layout design: Coffee Shop
• Show title: Yes
• Position: bottom-content
• Status: Published

2. Assign the module to the Coffee Shop menu item to display it on the required page.

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.