Header and navigation

The Chisel header has a top row for branch, phone and account details, a main row for the logo, search and cart, and a navigation row for your menu. This guide explains each part, how the department index menu uses your main menu, and which header settings to change.

Before you begin

• Build your main menu in the Shopify admin under Content > Menus. The department index menu depends on it.
• Decide whether you want a branch selector, a phone number, a country selector or a language selector in the header.
• If you use the tax switch, set Tax display to switch in the theme settings. See the volume and trade pricing guide.

1. Know the parts of the header

The header has three rows on a computer. On a phone the top row is kept to one line, the menu opens as a drawer, and the search field has its own row.

Top row (utility row)

• Branch line: the current branch and its opening hours, with a Change button. Shown when the branch selector is on and the header has at least one branch block.
• Phone: the phone number from the header's Phone number setting. It links to a phone call.
• Tax switch: ex. tax and inc. tax buttons. Shown only when Tax display is set to switch.
• Country and Language selectors: shown when Show country selector or Show language selector is on. Both are off by default in the header.
• Company name: shown for a signed-in customer who has a company account.
• Account: the account menu, from the header's Account menu setting.

Main row

• Logo, or the store name as text when no logo is set.
• All departments: opens the department index menu.
• Search: the search field. Its label reads "Search by name, code or part number". See the search by code guide.
• Quick order: a link to the quick order page. Shown when the Quick order page setting has a page.
• Cart: the cart link with the item count and the cart total. Opens the cart drawer, or the cart page, depending on the Cart type setting.

Navigation row

• The top-level links from your main menu, as plain text links.

2. Use the department index menu

The All departments button opens a panel under the header. The panel uses the three levels of your main menu.

1. Create the main menu in the Shopify admin. Add top-level links, such as "Power tools".
2. Under each top-level link, add second-level links, such as "Drills".
3. Under each second-level link, add third-level links, such as "Cordless drills".
4. Save the menu.

The panel shows:

• A left column with the top-level links.
• For the link you have selected, columns on the right. Each column has a second-level heading. Third-level links sit under each heading.

Select a top-level link, or move between the links with the arrow keys, to change the columns. Press Escape to close the panel. Focus returns to the All departments button.

If a top-level link has no children, the panel does not show columns for it.

The navigation row links still work without JavaScript. The index panel does not open without JavaScript.

3. Set up the branch line

The branch line needs header blocks. Each block is one branch.

1. Open the header in the theme editor.
2. Add a Branch block for each branch.
3. Enter the Branch name and the Opening hours line. The hours line is short text, such as "Open until 17:30".
4. Turn on Show branch selector in the Stock group of the theme settings. It is on by default.

The first branch block is the default branch for shoppers who have not chosen one. Shoppers select Change to open the Choose your branch dialog. Their choice is saved in the browser.

Use the same name as the Shopify location for each branch. This name links the branch line to the stock list on product pages. See the stock and branches guide.

4. Set the phone number

1. Open the header in the theme editor.
2. Enter the number in Phone number. Use the format your customers expect to dial.
3. Save.

The number shows in the top row and links to a phone call. Leave the field blank to hide it.

5. Set the selectors

1. Open the header in the theme editor.
2. Turn on Show country selector if you sell in more than one country. Turn on Show language selector if you have translated the store. See the translations guide.
3. Save.

The selectors use the markets and languages that you set up in the Shopify admin.

6. Set the header behavior

Open the header in the theme editor and set these:

• Color scheme: the color scheme for the header.
• Menu: the menu the header reads. The default is main-menu.
• Account menu: the menu for the account link. The default is customer-account-main-menu.
• Sticky header: Off, Always, or Show on scroll up. Use Show on scroll up to keep the main row in view while the shopper scrolls back up.

7. Use the mobile menu

On a phone, the menu button opens a drawer. The drawer uses the same main menu. Each top-level link with children opens to show its children. Third-level links appear inside each second-level group.

The drawer also has the Quick order link, when the page is set.

Menu promotions

You can show up to three promotion cards in the main menu. Each card has an image, a short kicker, a heading and a link. The whole card is one link.

1. In the theme editor, open the Header section.
2. Select Add block and choose Menu promotion. Add up to three.
3. Fill in the settings: - Top-level menu item: type the exact title of the top-level menu link the card belongs to, for example "Power tools". The title must match the menu link exactly. Leave it blank to show the card in every menu panel. - Image: use a clear image with the main subject in the centre. The image is cropped to a 4:3 frame. - Kicker: a short label above the heading, for example "New". - Heading: one short line, for example "Cordless drills on sale". - Link and Link text: where the card goes and the words shown under the heading, for example "Shop drills".
4. Save and open the menu panel to check the card.

In a menu panel, the cards sit in a column on the right. The panel shows up to two cards for each top-level item. If you add more, the extra cards are hidden.

On a phone, the cards appear as a row of small cards at the end of the menu drawer. Swipe the row sideways to see all of them.

Menu layout

Each top-level menu link with children has a small arrow button next to it. Select the arrow to open that link's panel. Select it again, press Escape, or select anywhere outside the panel to close it. Only one panel is open at a time. On a computer, the panel also opens when you rest the pointer on the link for a moment.

Use Department panel layout in the Header section to choose how the panel looks:

• Columns with headings (the default): each second-level link is a heading in its own column, with its third-level links under it. The columns are ruled and show four to a row. The last row says All and the top-level name, and links to that top-level page.
• Single column list: a compact list for small menus. Third-level links are indented under their second-level link.

A top-level link with no third-level links always uses the single column list, whichever layout you choose.

The All departments button still opens the index panel, which lists all three levels of the menu.

Check your setup

1. Open the store on a computer. Confirm that the top row, main row and navigation row show.
2. Select All departments. Move through the links. Confirm that three levels appear and that Escape closes the panel.
3. Open the store on a phone. Open the menu drawer. Confirm that the child links open at each level.
4. Select Change on the branch line. Choose a branch. Reload the page. Confirm that the branch line still shows your choice.
5. Turn on Sticky header with Show on scroll up. Scroll down and then up. Confirm that the main row returns.

Settings used

• Menu, Department panel layout, Account menu, Sticky header, Phone number, Show country selector, Show language selector, Color scheme (Header section).
• Branch blocks (Header section): Branch name and Opening hours line.
• Menu promotion blocks (Header section, up to three): Top-level menu item, Image, Kicker, Heading, Link, Link text.
• Show branch selector (Stock group).
• Tax display (Prices group).
• Quick order page (Trade features group).
• Cart type (Cart group).