Category layout allows displaying top-level categories on the separate page leading to the page with meals items included to the category. In this tutorial, we will learn how to create and configure a menu using Category Layout.
We will proceed as follows:
First, let's learn how to display a menu item. To learn how to display a menu item, you need to do the following:
Repeat steps 1-3 from Menu Layout tutorial.
Locate Menu Title field and enter Category Menu into it.
Now, let’s assign the Category Layout to the menu item.
Click Select button.
Locate Food Menu dropdown and select Category Layout from the list.
Click Save button.
Once we assigned Category layout to the menu item, let’s configure it.
Locate Options tab.
Mouse over Select Categories field and select Root Categories from the list. As a result, all categories will be displayed on a separate page.
Locate Layout Design field and choose Default from the list.
Mouse over Meal background color field and enter #f2f2f2. You can set any other color using a color picker.
Locate Category description position field and select Default. As a result, the description of the category will be as it is set in Default settings.
Go to the Meal image position field and select Left. As a result, meals images will be positioned at the left against the description.
Set Columns quantity parameter as Two. Thus, all meals get arranged into two columns.
Locate Display Top meal of the day and choose No. As a result, Meal of the day promo will not be shown at the top, just within the menu.
Mouse over Display PDF download button and set it as Yes.
Locate Display image field and set it as Yes.
Click Save button. Your screen should look similar to the screenshot below.
Go to the front-end to check the result.
Meals list page