Skip to main content

Documentation: Price List component

Menu card layout

Available since version 4.6.0. Next to the table layout, Price List can show your items as a menu card, the way a printed restaurant menu reads: no column headings, the name and the price on one line with a row of dots between them, and the description underneath in smaller grey text. The table layout is still there; the menu card is an extra choice, not a replacement.

Create a menu card

A menu card is a menu item type of its own. Go to Menus > [your menu] > New, choose Price List as the menu item type and pick one of:

  • All Categories (Menu Card): all your Price List categories with their items.
  • Single Category (Menu Card) PRO version only: one category and its items.
  • Multiple Categories (Menu Card) PRO version only: the categories you select, together on one page.

Your categories and items are the same ones the table layout uses, so you can show the same list as a table on one page and as a menu card on another.

Menu Card options

The menu item has a Menu Card tab with these settings:

Show Photo PRO version only Shows a photo column on the left of each item. It holds the custom fields whose Field Position is Before Name Column. On by default.
Photo Width PRO version only (only visible when Show Photo is set to Yes) Width of the photo column in px, rem or %. 80px by default.
Photo on Mobile PRO version only (only visible when Show Photo is set to Yes) Where the photo goes on a narrow screen, where a photo column leaves the text too little room: Keep beside the text (default), Above the name or Between the name and the description.
Show Description Shows the item description under the name, in smaller grey text. On by default.
Dotted Leader Draws the row of dots between the name and the price. On by default.

The Price Prefix and Price Suffix from the component options are used on a menu card as well, and a featured item keeps its featured styling.

Custom fields on a menu card PRO version only

A menu card has no columns, so the four Field Positions of a custom field get a place of their own on the card:

Before Name Column The photo column on the left. Use a media field for a photo of the dish. Hidden when Show Photo is set to No.
After Name Column On the name line, directly after the name and before the dots. Good for something short, such as "new" or a spice level.
Before Price Column and After Price Column A row under the description. Good for allergens, diet labels or a calorie count.

See Custom Fields for how to create a field and set its position.

Structured data

The menu item also has a Schema.org tab. For a restaurant menu, set Structured Data to Menu Card (Menu) so search engines read the page as a menu with sections and dishes. The layout and the structured data are two separate choices, so this is not switched on automatically. See Structured data (schema.org).

Styling

The card follows the fonts and colours of your template. To adjust it, add your own rules under Custom CSS. The classes you need most:

  • .pricelist-menucard: the card as a whole
  • .menucard-item: one item
  • .menucard-name, .menucard-price and .menucard-description: the name, the price and the description
  • .menucard-leader: the row of dots
  • .menucard-media: the photo column