How to create a mini website for your menus (Tiles style)

A mini website (Collection) can be displayed in one of two layouts: Classic, the default tab-style layout, or Tiles, which presents every menu and link as an image-led tile on a single scrollable page. This article covers the settings specific to the Tiles layout. For everything else involved in building and customizing a mini website, see the main article on creating a mini website.

â„šī¸ The Tiles layout requires the Integrations Management module to be enabled on the account.

A mini website built with Tiles can include two kinds of tiles: menu tiles, generated from integration links, and custom tiles, generated from external links such as "Book a table" or "Order online." Both are covered in this article.

Switching a mini website to the Tiles layout

  1. Go to the Collections screen and open the mini website to edit.
  2. Locate the Design > Layout setting.
  3. Switch to Tiles (the default is Classic).

Selecting Tiles always applies the tiles template to the mini website, overriding whatever layout is set as the account's default. Each mini website can be switched independently.

What defines the Tiles look

The single setting that most visibly defines the Tiles layout is the header background colour (default #262D45 ), which colours the band behind the mini website's title and introductory text. It can be adjusted from the same design settings used to customize a Classic mini website.

Collection link/Mini-website WITH a header background image.

Collection link/Mini-website WITHOUT a header background image.

Customizing the appearance of a menu tile

Each menu tile takes its appearance from its integration link, not from the mini website it appears in. This means:

  • Tile settings are configured once, on the integration link itself.
  • If the same integration link is added to several mini websites, it keeps the same tile appearance in all of them.
  • Tile colours do not inherit the mini website's own button colours; they are set independently.

On an integration link, the following can be customized:

  • Background colour (default #E5F5FD )
  • Text colour (default #262D45 )
  • Tile image, shown above the tile's title. The maximum height and width available to this image is capped by the mini website's own image settings, so a very large image may be scaled down to fit.

A mini website's own settings also control whether tile images are shown at all, and the maximum size they can display at; these apply to every tile in that mini website.

Choosing which tile opens first

As with the Classic layout, one integration link can be set as the mini website's main link. Visitors are taken to that menu automatically when they open the mini website, before browsing the other tiles.

A custom link added to a mini website (for example, "Book a table" or "Order online") can also be displayed as a tile by turning on its highlight option. A highlighted custom link has its own settings, separate from menu tiles:

  • Background and text colour, set individually for that link.
  • Shape and font weight, taken from the mini website's highlighted button settings.
External link is added, and "Show in header" is activated
A "Square" button shape is selected

The External link is displayed in the header.
An external link is added, "Show in header" is deactivated.
The External link is displayed as a separate Tile.

See also



Here are some examples of minisites that have been realized in Menutech using the "Tiles" style:

đŸ‹ī¸â€â™‚ī¸ Sport hotel in the Canary islands

🍹 Beach club in the Balearic Islands

🍖 Grill restaurant on the Amalfi Coast