Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Menu Blocks

Use Menu Blocks to display your restaurant's menus on your site. This is a great alternative to embedding .pdf menus, which aren't always as SEO-friendly as text directly on the page. By using special formatting, you can create multiple menus in a single Menu Block.

This guide covers adding Menu Blocks for your restaurant site. To build a drop-down menu in your site's navigation, visit Using folders

Menu Blocks are a Premium feature available in Business and Commerce plans.

Watch a video

Add a Menu Block

To add a Menu Block:

  1. Edit a page or post, click an insert point, and select Menu from the menu. For help, visit Adding blocks.
  2. Edit the text in the Menu tab to create your menus, menu sections, and menu items.
  3. Use the Design tab to customize the menu design.
  4. Use the Formatting Help tab for formatting tips.
  5. Click Apply to save your changes.
  1. Tap the Pages icon.
  2. Tap the title of the page you want to edit.
  3. Tap Edit or the pencil icon in the top-right corner.
  4. Tap the + icon in the top-right corner to open the block menu.
  5. Tap Menu to add a Menu Block.
  6. Tap Content to create your menus, menu sections, and menu items.
  7. Tap Menu Style and Currency Symbol to customize the menu design.
  8. Tap Done or to save your changes.

Add menus

To help you get started, Menu Blocks include sample content. We recommend replacing the sample items one-by-one with your own menu items to preserve formatting. You can also delete the content and follow the steps in this section to start from scratch.

Menu Blocks can hold multiple menus. For example, you can add your brunch, lunch, and dinner menus to the same block.

To add a menu:

  1. Enter the name of the menu.
  2. Add at least three equals signs (=) below it.

  1. Add an optional description or note about the menu directly below the equals signs.

  1. Add more menus below using the same process. 

These menus transform into category navigation on the page. You'll learn how to add the rest of the menu content in the sections below.

Note: If you add only one menu to the block, the category navigation may not appear.

  1. In the block editor, tap Content.
  2. Enter the name of the menu.
  3. Add at least three equals signs (=) below it.
  4. Add an optional description or note about the menu directly below the equals signs.
  5. Add more menus below using the same process. 

These menus transform into category navigation on the page. You'll learn how to add the rest of the menu content in the sections below.

Note: If you add only one menu to the block, the category navigation may not appear.

Add sections

You can divide each menu into sections. For example, sections can organize a menu by appetizers, salads, entrées, sides, and desserts.

To create a section:

  1. Enter the section name below the appropriate menu.
  2. Add at least three hyphens (-) beneath it.
  3. On the line directly below the hyphens, enter an optional description of the section.
  4. Ensure there's an empty line between sections.

Sections will appear as headings on the page.

  1. In the Content tab, enter the section name below the appropriate menu.
  2. Add at least three hyphens (-) beneath it.
  3. On the line directly below the hyphens, enter an optional description of the section.
  4. Ensure there's an empty line between sections.

Sections will appear as headings on the page.

Add menu items

To add a menu item:

  1. Enter the name of the item below a section.
  2. Add a description of the item below its name.
  3. To display the price, add a price below the description.
  4. Add pricing variants by using a slash (/) between prices. This is useful for prices by the glass/bottle or full/half-portions.
  5. Add market prices by adding $MKT or $Market Price as the price. As long as the currency symbol is first, you can place the price immediately after the menu item or description.
  6. If you have an odd number of items, adding a <br /> tag at the bottom of the section can help even out menu columns.

  1. In the Content tab, enter the name of the item below a section.
  2. Add a description of the item below its name.
  3. To display the price, add a price below the description.
  4. Add pricing variants by using a slash (/) between prices. This is useful for prices by the glass/bottle or full/half-portions.
  5. Add market prices by adding $MKT or $Market Price as the price. As long as the currency symbol is first, you can place the price immediately after the menu item or description.
  6. If you have an odd number of items, adding a <br /> tag at the bottom of the section can help even out menu columns.

Customize the design

You can customize the menu style and the currency symbol of Menu Blocks.

Menu style

Click the Design tab in the block editor and select a style from the Menu Style drop-down menu:

  • Simple (Centered) creates a single column menu with centered text. This design is ideal for short menus.
  • Classic (Multi-column) creates a menu with multiple columns and left-aligned text. The number of columns depends on the width of your site and browser.

Currency symbol

Click the Design tab and select a currency for menu prices from the Currency Symbol drop-down menu. You can choose Dollar ($), the Euro (€), the Pound (£), or the Yen (¥).

Note: The currency symbol selected here overrides the currency symbol used when composing your menu.

Menu style

Tap Design in the block editor, then tap Menu Style to choose from these styles:

  • Simple (Centered) creates a single column menu with centered text. This design is ideal for short menus.
  • Classic (Multi-column) creates a menu with multiple columns and left-aligned text. The number of columns depends on the width of your site and browser.

Currency symbol

Tap Design in the block editor, then tap Currency Symbol to select a currency symbol for menu prices. You can choose Dollar ($), the Euro (€), the Pound (£), or the Yen (¥).

Note: The currency symbol selected here overrides the currency symbol used when composing your menu.

Fonts and colors

Text in the Menu Block follows the same style tweaks as your site's body text. To learn more, visit Changing fonts.

Formatting help (computer only)

The Formatting Help tab has examples of formatted menus, sections, and menu items.

Tip: If you don't like the formatting of the menu navigation and sections, you can use Menu Blocks to just add menu items, then add headers with Text Blocks. For an example, see the Hunter template's demo content.

Troubleshooting

Menu items aren't aligned

Menu Block alignment depends on many factors: whether there are descriptions, title and description text length, the number of items, and more.

Since browsers attempt to create equal columns of content, the text will flow top to bottom, left to right. This means item titles won't always line up perfectly.

If you have an odd number of items, it can help to add the following HTML tag at the bottom of the section:

<br />

This may balance out the formatting so the menu items display in even rows.

Text isn't appearing when I'm typing

If you're not seeing text appear as you type, finish entering content then save the block. Reopen it and your content will now appear as it's entered.

My currency symbol isn't available

If you're using an unavailable currency, in the Design tab, click the Currency drop-down menu, and select None. In the Menu tab, menu items use the following structure:

Title
Description
Price

On the third line of an item, enter your price using any currency symbol available on your keyboard. Leave a space between the currency symbol and your price.

I can't paste text into the Menu Block

On computers, it's not possible to right-click into Menu Blocks when editing. To copy and paste content, use keyboard shortcuts instead. To prevent formatting issues, we recommend these shortcuts:

Mac

  • Copy + C
  • Paste - + Shift + V

Windows

  • Copy - Ctrl + C
  • Paste - Ctrl + Shift + V

Text isn't formatting correctly

Errors in Menu Blocks interfere with their text formatting. To avoid issues, use the following tips to troubleshoot your text:

  • Confirm that you have at least three equals signs (=) separating menus and hyphens (-) separating sections.
  • Press Return or Enter after every text entry to ensure each line is placed correctly.
  • Avoid using the space bar to separate content. Menu Blocks don't use spaces in this way and won't format text correctly.
Was this article helpful?
30 out of 83 found this helpful