Wix Restaurants: Customizing the Look of Wix Restaurants Menus

Choose the menus you want to show on your site and arrange their order.

1. Click the Menus tab.

2. Select the relevant option under Which menus should be displayed and in what order?:

   • All menus: Display all available menus.

   • Specific menus: Select the checkbox(es) next to the relevant menu(s).

3. Drag and drop to reorder the menus as needed.

   

Tip: Learn how to show menus on multiple pages and not just on the menu page.

Use AI to create a menu style.

1. Click the Style AI tab.

2. Enter a description of the menu style

3. (Optional) Enable the Keep site theme toggle to maintain your site's existing colors and fonts.

4. Click Generate Design.

Define your menu's structure and appearance.

1. Click the Layout tab.

2. Choose the relevant layout to display your menu.

3. Customize the layout by adjusting navigation style, adding images, and fine-tuning other settings.

   

Select which menu elements to show, hide free item prices, add placeholder images, and enable image expansion.

1. Click the Display tab.

2. Select or deselect the relevant checkbox to show / hide the desired elements.

3. Select which Additional display options you want to show:

   • Show or hide prices for free items: You can hide prices for items that are offered for free (items priced at 0).

     1. Click Pricing options.

     2. Click the Show prices set to 0 toggle to show or hide the price for free items:

        • Enabled: '0' appears a the price for free items. Then, select which menus and sections should show this price: All menus and sections or only Specific menus and sections.

        • Disabled: Prices for free items are hidden on your live site.

   • Add a placeholder image: If a dish doesn’t have its own image, you can upload a placeholder image that appears instead.

     1. Click Placeholder image.

     2. Click the Show placeholder images toggle to set an image and choose which menus and sections it applies to.

     3. Select an image or upload a new one.

     4. Choose Which menus and sections should display placeholder images?:

        • All menus and sections: Apply the placeholder image site-wide.

        • Specific menus and sections: Select the checkbox(es) next to the relevant menu(s) and section(s).

          

Customize your menu's design, including background, text, labels, prices, and other style options, with various colors, fonts, and styles.

1. Click the Design tab.

2. Select the element you want to design.

3. Design the background, text, colors, style and more.

   

Choose the menus you want to show on your site and arrange their order.

1. Click the Menus tab.

2. Select the relevant option under Which menus should be displayed and in what order?:

   • All menus: Display all available menus.

   • Specific menus: Select the checkbox(es) next to the relevant menu(s).

3. Drag and drop to reorder the menus as needed.

   

Tip: Learn how to show menus on multiple pages and not just on the menu page.

Define your menu's structure and appearance.

1. Click the Layout tab.

2. Choose the relevant layout to display your menu.

3. Customize the layout by adjusting navigation style, adding images, and fine-tuning other settings.

   

Select which menu elements to show, hide free item prices, add placeholder images, and enable image expansion.

1. Click the Display tab.

2. Select or deselect the relevant checkbox to show / hide the desired elements.

3. Select which Additional display options you want to show:

   • Show or hide prices for free items: You can hide prices for items that are offered for free (items priced at 0).

     1. Click Pricing options.

     2. Click the Show prices set to 0 toggle to show or hide the price for free items:

        • Enabled: '0' appears a the price for free items. Then, select which menus and sections should show this price: All menus and sections or only Specific menus and sections.

        • Disabled: Prices for free items are hidden on your live site.

   • Add a placeholder image: If a dish doesn’t have its own image, you can upload a placeholder image that appears instead.

     1. Click Placeholder image.

     2. Click the Show placeholder images toggle to set an image and choose which menus and sections it applies to.

     3. Select an image or upload a new one.

     4. Choose Which menus and sections should display placeholder images?:

        • All menus and sections: Apply the placeholder image site-wide.

        • Specific menus and sections: Select the checkbox(es) next to the relevant menu(s) and section(s).

          

Customize your menu's design, including background, text, labels, prices, and other style options, with various colors, fonts, and styles.

1. Click the Design tab.

2. Select the element you want to design.

3. Design the background, text, colors, style and more.

   

Choose the menus you want to show on your site and arrange their order.

1. Click the Menus tab.

2. Select the relevant option under Which menus should be displayed and in what order?:

   • All menus: Display all available menus.

   • Specific menus: Select the checkbox(es) next to the relevant menu(s).

3. Drag and drop to reorder the menus as needed.

Tip: Learn how to show menus on multiple pages and not just on the menu page.

Define your menu's structure and appearance.

1. Click the Layout tab.

2. Choose the relevant layout to display your menu.

3. Customize the layout by adjusting navigation style, adding images, and fine-tuning other settings.

Use AI to create a menu style.

1. Click the Style AI tab.

2. In Describe menu style, enter the look and feel you want for your menu (for example, “a modern layout with bold typography and vibrant colors”).

3. (Optional) Enable the Keep site theme toggle if you want AI to match your existing site theme.

4. Click Generate Design.

5. Review the design AI creates and adjust anything you want before you keep it.

Select which menu elements to show, hide free item prices, add placeholder images, and enable image expansion.

1. Click the Display tab.

2. Select or deselect the relevant checkbox to show / hide the desired elements.

3. Select which Additional display options you want to show:

   • Show or hide prices for free items: You can hide prices for items that are offered for free (items priced at 0).

     1. Click Pricing options.

     2. Click the Show prices set to 0 toggle to show or hide the price for free items:

        • Enabled: '0' appears a the price for free items. Then, select which menus and sections should show this price: All menus and sections or only Specific menus and sections.

        • Disabled: Prices for free items are hidden on your live site.

   • Add a placeholder image: If a dish doesn’t have its own image, you can upload a placeholder image that appears instead.

     1. Click Placeholder image.

     2. Click the Show placeholder images toggle to set an image and choose which menus and sections it applies to.

     3. Select an image or upload a new one.

     4. Choose Which menus and sections should display placeholder images?:

        • All menus and sections: Apply the placeholder image site-wide.

        • Specific menus and sections: Select the checkbox(es) next to the relevant menu(s) and section(s).

Customize your menu's design, including background, text, labels, prices, and other style options, with various colors, fonts, and styles.

1. Click the Design tab.

2. Select the element you want to design.

3. Design the background, text, colors, style and more.

Click the Manage tab, then select Manage Menus to access your site's dashboard. From there, you can edit, publish, unpublish, and create new menus.

The Menus app automatically creates a mobile-friendly version of your menus, so it's already designed to look ideal on every screen size.

Having said that, you can always adjust the layout and design on mobile and choose what to show customers to make your menus stand out. The design changes you make on mobile don't affect your desktop version.

To make customizations for mobile:

• Wix Editor: Go to the mobile editor.

• Studio Editor: Click the mobile breakpoint.

Yes. By default, all your published menus are displayed on the same page, separated by tabs for navigation. However, you can create multiple menus and display them on separate menu pages.

For example, you may want to highlight today's specials on the homepage or highlight a new menu on a dedicated page. Learn more about displaying your menus on multiple pages.

Yes. To use right-to-left (RTL) alignment:

• Your site and regional settings must be set to an RTL language.

• Make sure the Menus app is updated in your editor:

  1. Go to the Menus page in your editor.

  2. Click on the Menus element.

  3. Click Update.

     Note: If you don’t see the 'Update' option, the app is already up to date.

You add and organize your menu modifiers right from your site's dashboard.

1. Go to your editor.

2. Click the Menus element on your page.

3. Click Settings.

4. Click the Display tab.

5. Scroll down to Items and select checkbox next to Expand on click under Image.