Checkout Beast

Set up your store menus

On this page

Checkmate shows the menus you build in your Shopify admin. You build each menu once in Content > Menus, then choose it in the editor for each place it should appear.

Where each menu shows

Place

Setting in the editor

Menu it starts with

How nested links show

Header, on screens 1000 px wide or wider

Main menu in the Header section

Main menu

A top-level link with nested links opens a dropdown. If a nested link has links of its own, the dropdown shows the nested links as column headings with their links under them.

Mobile menu, on screens narrower than 1000 px

The same Main menu

Main menu

Each link with nested links opens and closes in place. A nested link with links of its own shows as a small heading over them.

Footer link columns

Link columns menu in the Footer section, with the Image and link columns or Wordmark layout

Footer menu

Each top-level link becomes a column heading, with its nested links listed under it. Up to three columns show.

Footer policy links

Policy menu in the Footer section, with the Centered layout

Footer menu

One row of top-level links. Nested links do not show.

Under a mega menu's links

Policy menu in a Mega menu block with Product cards

Footer menu

One list of top-level links.

Account popup

Account menu in the Header section

The menu with the handle customer-account-main-menu

The links in the popup that opens from the account icon in the header.

Inside a drawer or a section

Main menu in a Menu block

Main menu

A list down the page, where each link with nested links opens and closes in place. A nested link with links of its own shows as a small heading over them.

A few details matter when you plan the menus:

  • The mobile menu opens from Menu in the Mobile bottom navigation section, the bar at the bottom of the screen on phones and tablets. The header itself has no menu button on those screens.
  • A footer column heading is plain text, so the top-level link's own address is not used. A fourth top-level link and the ones after it do not show.
  • The account popup shows only when Account icon is on in the Header section and customer accounts are turned on in your Shopify admin. Shopify's guide to customer accounts explains how to turn them on.
  • A Menu block can go in the Offcanvas drawer section and in sections that take blocks, such as Section. Menu block describes it.

To show products or collection cards under a header link, see Add a mega menu.

Build a menu in your Shopify admin

Create the menu and its nested links in Content > Menus. To nest a link, drag it under another link. Shopify's guide to menus and its guide to drop-down menus describe each step.

Choose the header menu

  1. In your Shopify admin, go to Online Store.

  2. Next to Checkmate, click Edit theme.

  3. In the editor sidebar, under Header, select Header.

  4. Under Main menu, select your menu.

    Navigation group of the Header section with Main menu set to Coffee navigation, Menu position and Stick to top on scroll

  5. Click Save.

The mobile menu changes with it.

The Footer section's Layout decides which footer menu setting shows.

  1. In your Shopify admin, go to Online Store.
  2. Next to Checkmate, click Edit theme.
  3. In the editor sidebar, under Footer, select Footer.
  4. If Layout is Image and link columns or Wordmark, choose the menu in Link columns menu. If Layout is Centered, choose it in Policy menu.
  5. Click Save.

Footer section describes the three layouts.

Was this article helpful?