Customize your Web Menu

Use this doc as a guide through all of the settings on your Web Menu settings. It starts at the very top (Menu name) and walks through each setting in order.

👉 There's quite a bit here, so make use of the Index to skip straight to a particular setting.

Index

Overview
Template
Structure
Content
Customize
- Fonts
- Colors

Overview

How do I get to the page where I customize my Web Menu?

Start out on your Update Menu page (where you add/remove items from your menu). Click on the "Web" tab at the top:

If you've already created a Web Menu profile, just click the "Preview or edit" button and you'll be brought to the settings page:

If you haven't created a Web Menu profile yet, then click the "+ New Web Menu" button and you'll be brought to the settings page:

Organization of settings

All settings are organized into 4 settings categories:

Template
Structure
Content
Customize

Each has an accordion style dropdown; to access the settings within each category, just click on it to expand the settings nested within.

Here's how it looks on desktop with the categories collapsed:

And here's how it looks with the "Structure" category expanded:

On mobile, the settings will look the same and be in the same order. The only difference is that on mobile there is no side-by-side preview; once you make changes on mobile and save them, you can choose to preview your menu on a new webpage.

We recommend customizing your Web Menu on a desktop (best) or a tablet (distant second best) rather than on a phone (only do this if you don't have another option).

How do you save updates?

Updates autosave as soon as you make them.

For text fields (e.g. Menu name or Header message), just click anywhere outside the text box to save.

When you make the update, the preview on the righthand side of the page will automatically update.

This is where you name the Web Menu profile you're working on. We recommend naming the menu according to what's included in it. If it's just your beer, then call it "Beer Menu." If it's all drinks, call it "Drink Menu." And so on.

The menu name is important if you intend to create more than 1 Web Menu profile, because it'll help you keep your menus straight.

You'd create more than one profile if you wanted to show different content on different tabs or pages of your website, e.g. have your beers on one page, your wines on another, food on another, and so on. In that case, you'd create a different profile for each tab/page, and name them all accordingly.

Template

Here you can choose from 4 wide-ranging design templates. You can of course just choose a template and leave things as-is, but you can also think of these templates as a base and customize from there. Almost everyone takes that latter route.

The templates are:

Base
Minimal Single Column
Sidebar Navigation
Grid

There's also a template called "Custom":

Click this one if you'd like BeerMenus to take a crack at creating a custom menu for you—it'll launch a flow where you can chat with us, email us, or schedule a call with us. There's no additional fee for this, so we recommend it.

Structure

Choose to sort by alphabetical order or by style.

Sorting by style groups together beers according to their flavor profile—e.g. Hoppy, Crisp & Bright, etc. You can see an example of this in the above screenshot, where all the light beers are grouped together in the "Crisp & Bright" section.

Note 1: if you'd like to sort by tap number/numerical order, you must select Alphabetical ordering in this setting and then enable tap numbers/numerical order by following these instructions.

Note 2: if you'd like to sort your menu items in a custom way but not include the numbers, follow these steps.

Max columns

This is where you choose how many columns you'd like to use.

We phrase it as "Max Columns" because Web Menus adjust to screen size, so if you select 3 columns here, it won't always show in 3 columns (e.g. on a phone it'll go down to 1 or 2). Here's more about that.

Text alignment

Self-explanatory and works just like it would on Microsoft Word, Pages, or whatever else. Simply choose whether you'd like your text aligned to the left, center, or right.

Spacing

Use this setting to adjust how much space your menu takes up. "Comfortable" will take up the most space, and "Compact" the least.

Content

Header message

Use this field to add a header message, which will show up above your menu. Folks use this space to discuss happy hour, daily specials, and so on. Here's an example:

Just leave the fields blank if you don't want to include a header message.

Check/uncheck the boxes to include/exclude the items in this list from your entire menu:

👉 Please flag this note beneath this list of checkboxes:

Here's an example of when you'd use this approach: you want to include beer descriptions for your On Tap beers, but not your bottles and cans. In that case, you'd uncheck the "Show descriptions" box here and then check the "Show descriptions" box within the On Tap Menu Section settings. Scroll down here see how that looks.

Here's more on Settings vs. Menu Sections settings.

Check/uncheck boxes to include/exclude non-menu-item menu content. Here's the list:

Including/excluding menu sections

To include menu sections on your Web Menu, simply check the box next to the names of the Menu Sections you'd like to include:

To reorder Menu Sections, use the click and drag icons to click and drag them into the order you'd like:

This is where you can define settings for particular menu sections.

To access these settings, simply click on the "Settings" dropdown below the Menu Section name:

They'll expand below:

The settings you define here will only apply to the Menu Section within which you're working. I.e. if you want the same settings to apply to another section, you'll need to go that Menu Section's settings and update them there following the same workflow.

Note: if you'd like to define settings for your entire menu and not just on the Menu Sections basis, you can use the settings in the Menu Items settings section.

Here's more about Settings vs. Menu Sections settings.

Customize

Fonts

Font selection

You can choose fonts for each element of your menu (e.g. Item name, Item description, and so on). In total there are 8 elements for which you can choose fonts.

To update fonts for a given element, just click the font dropdown associated with that element:

Custom Fonts

Here's how you can use custom fonts.

Font Colors

To change the font color for a menu element, click the round color selector circle next to the element you're looking to update:

Then utilize the color picker to choose the color you want:

You can click anywhere in the spectrum box, enter a hex code in the text field, or else just choose from a popular color in the boxes at the bottom.

Colors

Use this section of settings to update the color for non-font menu elements, like menu background, button and link color, etc.

To select a color, click the round color selector circle next to the menu element: