Setup the Menu drawer
What is Menu Drawer?
is a slide-out hamburger menu that moves horizontally when the user clicks it. We recommend using to display more detailed menus instead of the header
Adding & customize Menu Drawer
Menu Drawer section is created and configured in the Radian theme by default. However, if you can’t find it, go to Theme Editor -> scroll down, and under the Overlay group, you’ll see the Menu Drawer section. If you still don’t see it, click Add section -> then select Menu Drawer
In the Menu Drawer section, there are the configuration options below:
MENU DRAWER
| Color Scheme | Menu drawer color |
|---|---|
| Drawer width | Drawer width size option |
| Top-Level Menu Typography | Font used for the main menu |
| Child Menu Typography | Font used for the submenu |
| Grandchild Menu Typography | Font used for the second-level submenu |
These fonts are set in Theme Settings -> Typography
Add menus and other customizations
To add the main menu to the drawer menu, go to Menu Drawer section -> select Add block -> then choose the Menu panel block
In the Menu panel block, select the menu you set up in Shopify Admin
If you're new to Shopify, learn how to create a menu here.
Shopify Help Center | Add, remove, or edit menu items in your online store
In addition to the main Menu Panel block for displaying the menu, there are also other blocks:
- Line: 1 line to create a divider between sections
- Stories: Display media as images or videos you choose to add, and you can attach products to each item. The display style is similar to Instagram / Facebook stories
- Column menu: A small menu type that displays with up to 2 customizable columns (First menu and Second menu)
- Social Links: displays the social media links you’ve set up
- Promo: Create video / image media and you can attach a link to it
If you disable / or delete the Menu Drawer section, the burger menu on both desktop and mobile will use the header menu as a replacement