Wix Restaurants: Customizing the Look of Your Online Orders Page

Your selection determines the available options, such as changing the background color of menu items or Add to cart button.

1. Click the relevant element on the page.

2. Click the Design icon

   

   .

3. Select the specific part you want to design.

4. Use the available options to design the background, text, colors and style.

   

Customize your menu layout by choosing how items are arranged on your online ordering page. For example, you can position your online ordering page title on or below the display image.

1. Click the relevant element on the page.

2. Click the Layout icon

   

   .

3. Choose your desired layout:

   • Strip: Organizes menu items in wide horizontal band. You can place the item on either the right or left side.

   • Card: Individual, self-contained units (cards) that display various content types.

   • Below Image: The item's text appears under the image.

   • On Image: The item's text appears on top of the image.

     Tip: You can also adjust the height of the image by clicking directly on the image.

     

Make customers clearly see which items are out of stock or unavailable by adjusting their design.

1. Click the Items element on the page.

2. Click the Design icon

   

   .

3. Select Unsellable item prices / Unsellable item images and customize it to your preference.

   

Choose the elements you want to display or hide on your Online Orders (New) page. For example, show the Order button when a customer adds an item to their cart.

1. Click the Elements icon

   

   .

2. Select or deselect the elements under Widget Elements to show or hide them.

Customize each aspect of your online ordering page. Based on your selections, you have various options available, such as changing the background color of your menu items or Add to cart button.

1. Click the Open Inspector icon

   

   at the top right of the editor.

2. Select the relevant element under Design (e.g. Fulfillment Picker).

3. Design the available options (e.g. background, text, section tabs).

   

Explore different layouts for menu item arrangement.

1. Click the Items element on the page.

2. Click the Layout icon

   

   .

3. Choose the relevant layout:

   • Strip: Organizes menu items in wide horizontal band. You can place the item on either the right or left side.

   • Card: Individual, self-contained units (cards) that display various content types.

     

Make it easy for customers to view item details, including price, images, and stock status

1. Click the Open Inspector icon

   

   at the top right of the editor.

2. Click the Items element on the page.

3. Select the relevant Items option and customize the details accordingly. For example, select Unsellable item prices / Unsellable item images and customize it to your preference.

   

Choose the elements you want to display or hide on your Online Orders page. For example, show the Order button when a customer adds an item to their cart.

1. Click the Online Orders element on your page.

2. Click the Elements icon

   

   .

3. Select or deselect the elements under Widget Elements to show or hide them.

   

Design settings let you control how different parts of your Online Orders page look. For example, you can adjust menu item colors, update section heading fonts and customize the Add to cart icon after you choose to display it.

1. Click the Settings icon

   

   on the action bar.

2. Click the Design tab.

3. Select the specific part you want to design.

4. Use the available options to design the background, text, colors and style.

   

Adjust your menu layout to control how content appears on your Online Orders page. For example, you can choose where the page title appears in relation to the display image.

1. Click the Settings icon

   

   on the action bar.

2. Click the Layout tab.

3. Choose the area you want to customize:

   • General: Adjust the horizontal padding of the Online Orders page.

   • Header: Choose whether the header appears Below image or On image, and adjust the cover image height.

   • Menu: Adjust the section cover image height.

   • Menu Item: Choose how menu items appear on the page.

     • Choose a layout: Select Strip or Card.

     • Image placement: Choose whether the item image appears on the Left side or Right side.

     • Image ratio: Select 1:1, 3:4 or 9:16.

     • Resize options: Select Crop or Fit.

     • Add to cart button placement: Choose whether the Add to cart icon appears with the Item info or On image.

       

Choose which elements appear on your Online Orders page so customers see the information and actions you want to highlight. For example, you can hide the Add to cart button.

1. Click the Settings icon

   

   on the action bar.

2. Click the Display tab.

3. Select or deselect the elements to show or hide them.

For optimal display, we recommend using high-quality JPEG images with a 16:9 aspect ratio and a minimum resolution of 2560 × 1440 pixels to ensure clarity and fast loading times. Learn more about optimizing your images.

You can customize your restaurant pages, such as the order tracker page, directly in your editor.

You can reorder your menus at any time to highlight your offerings and make it easier for diners to find what they want.

Based on the editor you're using, follow the steps below.

In the Wix Editor:

1. Go to your editor.

2. Go to the Online Orders page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click Restaurant Pages.

   3. Click Online Orders.

3. Click the Online Orders element on your page.

4. Click Menu Settings.

5. Reorder the relevant option:

   • One location: Drag and drop to reorder the menus in your preferred order.

   • Multiple locations: Click the relevant location to see your menus. Then, drag and drop to reorder the menus in your preferred order.

In the Studio Editor:

1. Go to your editor.

2. Go to the Online Orders page:

   1. Click Pages

      

      on the left side of the editor.

   2. Click Online Orders under Restaurant Pages.

3. Click the Online Orders element on your page.

4. Click Menu Settings.

5. Reorder the relevant option:

   • One location: Drag and drop to reorder the menus in your preferred order.

   • Multiple locations: Click the relevant location to see your menus. Then, drag and drop to reorder the menus in your preferred order.

In the Wix Harmony Editor:

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. (In the Site Pages panel) Select the Online Orders page under Restaurant Pages.

   Tip: Jump to the page you need by clicking the dropdown next to Site Pages and selecting Online Orders.

4. Click the Online Orders element on your page.

5. Click the Settings icon

   

   on the action bar.

6. Click the Menus tab.

7. Drag and drop the menus under Reorder Menus into your preferred order.

   • One location: Drag and drop the menus into your preferred order.

   • Multiple locations: Click the Location drop-down, select the relevant location, then drag and drop the menus into your preferred order.

Items add straight to the cart only when they do not have any modifiers or variants. If an item has any modifiers or variants, whether optional or required, the item details window opens first so customers can review the available options before adding the item to the cart.

No. The setting applies to the entire Online Orders widget. It's not currently possible to enable it for specific menu sections or individual items only.

Based on the editor you're using, follow the steps below.

In the Wix Editor:

1. Click the Online Orders element on your page.

2. Click the Elements icon

   

   .

3. Deselect the elements under Widget Elements.

In the Studio Editor:

1. Click the Online Orders element on your page.

2. Click the Elements icon

   

   .

3. Deselect the elements under Widget Elements

In the Wix Harmony Editor:

1. Click the Settings icon

   

   on the action bar.

2. Click the Display tab.

3. Deselect the element.