Add a Restaurant or Bar Menu to Your Website

Add a Restaurant or Bar Menu to Your Website

If you want to add a menu to your website, you have a few different options. You can:

  • Create a dedicated "Menu" page using the platform tools.

  • Upload a PDF menu.

  • Embed a third-party menu widget.


Option 1: Create a Standalone "Menu" Page

Creating a menu on a dedicated page is great for SEO and can help drive more organic traffic to your website.

  1. Select the Pages tab at the top of the Websites app.

  2. Click the + Add A Page button.

  3. Check the box next to the Menu page type. Click Add.

  4. A new page titled "Menu" will appear. Click on it to open it.

  5. The Menu page comes with a pre-built Menu items content block. Click Add a Menu Item to begin adding your food or drink items.

You can edit each menu item to include its name, description, price, and an image.

To create separate menu categories (e.g., "Lunch," "Dinner," "Drinks"), add a new Menu items content block for each category.

Option 2: Upload a PDF Menu

Uploading a PDF menu gives you more control over the design, as you can create it outside the Websites 360® platform. This option is also beneficial if you use QR codes, as it allows mobile users to easily scroll and zoom in on your menu.

You can add a PDF to your website by first uploading it to your Resource Collection, and then linking to it from a button or text link.

Note: If you use a third-party accessibility widget, it may not cover any PDFs you upload. You may need to take extra steps to ensure your PDFs are ADA compliant.


Option 3: Embed a Third-Party Menu Widget

If you use an external platform to build your menu, you can embed it on your website using an HTML block.

  1. Build your menu on the third-party platform and copy its embed code.

  2. In the Pages panel in Websites 360®, open the page where you want to add the menu.

  3. Click the (+) icon and select HTML to create an HTML block.

  4. Paste the embed code in the first empty line in the block (next to the number 1), then click Save.

Note: For security reasons, the HTML block does not support JavaScript. If your embed code contains JavaScript, you may need to use a "Restricted Code" block. Contact support for more information.

    • Related Articles

    • Change Browser Tab Bar Color for Safari

      Safari's newer browser version (Version 15 and later) lets website owners change the color of their website visitor's browser tab while viewing the website. You can change the color of your website visitors' browsers on Safari by adding a code ...

    • Edit Your Website's Navigation Design

      The Navigation settings in the Design panel lets you manage the appearance of your your website's navigation bar, menu items, and drop-down menus. You can choose separate settings for how your navigation menu appears on desktop and mobile devices. ...

    • Add and Remove Website Users

      You have the ability to allow multiple users to manage and contribute to your website. Only Admins and Owners can designate another user as an Admin. If you need Admin access, please send these steps to an Owner or Admin on your account. Add a new ...

    • Embed a Google Calendar on Websites 360®

      You can share your Google Calendar with your website visitors by embedding an interactive calendar to your website. Visitors can click and save your public calendar events. Note: The function of the Google Calendar is dependent upon third-party code, ...

    • Add a Video to Your Websites 360® Site

      You can add video content to your website by embedding a video that's been uploaded to a third-party site like YouTube or Vimeo. This guide covers both options. Option 1: Add a Vimeo Video Navigate to the Vimeo video you want to add to your website. ...