A side menu slides in from the left edge of the screen. The editor calls it the Offcanvas drawer section. It can hold links with icons, a menu, a newsletter signup and social icons, so it suits promotions and secondary pages that do not belong in the header. It is a different menu from the mobile menu, which always shows your header menu.
The drawer opens from the menu button at the left end of the announcement bar, or from any link to #OffcanvasDrawer, such as a menu link or a button in a section. The header has no button for it. If your store has no announcement bar, as with the Fang style, add one first or use a link.
Add an announcement bar
Skip this part if your header already has an announcement bar.
In the editor sidebar, under Header, click Add section.
Select Announcement bar.
Click Save.
The new bar comes with two sample messages in Announcement blocks. Change their text, or delete them if you want only the menu button. With Show menu button on, the bar shows even without messages.
In the editor sidebar, under Header, select Announcement bar.
Under Navigation, turn on Show menu button. It is on by default.
Click Save.
The button shows two short lines at the left end of the bar. On screens narrower than 768 px, the messages take the first row of the bar, and the button moves to the start of a second row.
Fill the drawer
The drawer is a section in the Overlays group of the editor sidebar, where the cart drawer and the popup also live.
In the editor sidebar, under Overlays, select Offcanvas drawer. The drawer opens in the preview.
Under Offcanvas drawer, click Add block and select a block, such as Link with icon, Menu, Newsletter form or Social links.
In the block's settings, enter its text and links.
Repeat steps 4 and 5 for each block you want.
Click Save.
While Offcanvas drawer is selected under Overlays, the drawer stays open in the preview, so each block you add shows in it.
The drawer takes any theme block and app blocks. Your logo shows at its top. The drawer comes with a group of five Link with icon blocks, a heading, a Newsletter form and Social links. Offcanvas drawer section describes the section.
If Offcanvas drawer is missing under Overlays, click Add section under Overlays and select Offcanvas drawer.
A side menu slides in from the left edge of the screen. The editor calls it the Offcanvas drawer section. It can hold links with icons, a menu, a newsletter signup and social icons, so it suits promotions and secondary pages that do not belong in the header. It is a different menu from the mobile menu, which always shows your header menu.
The drawer opens from the menu button at the left end of the announcement bar, or from any link to
#OffcanvasDrawer, such as a menu link or a button in a section. The header has no button for it. If your store has no announcement bar, as with the Fang style, add one first or use a link.Add an announcement bar
Skip this part if your header already has an announcement bar.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, click Add section.
Select Announcement bar.
Click Save.
The new bar comes with two sample messages in Announcement blocks. Change their text, or delete them if you want only the menu button. With Show menu button on, the bar shows even without messages.
Turn on the menu button
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, select Announcement bar.
Under Navigation, turn on Show menu button. It is on by default.
Click Save.
The button shows two short lines at the left end of the bar. On screens narrower than 768 px, the messages take the first row of the bar, and the button moves to the start of a second row.
Fill the drawer
The drawer is a section in the Overlays group of the editor sidebar, where the cart drawer and the popup also live.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Overlays, select Offcanvas drawer. The drawer opens in the preview.
Under Offcanvas drawer, click Add block and select a block, such as Link with icon, Menu, Newsletter form or Social links.
In the block's settings, enter its text and links.
Repeat steps 4 and 5 for each block you want.
Click Save.
While Offcanvas drawer is selected under Overlays, the drawer stays open in the preview, so each block you add shows in it.
The drawer takes any theme block and app blocks. Your logo shows at its top. The drawer comes with a group of five Link with icon blocks, a heading, a Newsletter form and Social links. Offcanvas drawer section describes the section.
If Offcanvas drawer is missing under Overlays, click Add section under Overlays and select Offcanvas drawer.