User Guide

Search limit to:






Drawer menu

by Admin on Oct 05, 2025

1. What is the Drawer menu?

The Drawer Menu is a mega menu layout that displays top-level menu items as horizontal tabs. Each tab contains a dedicated panel below with columns of lower-level menu items and optional media. This menu embodies Maximize’s core idea in utilizing both horizontal and vertical header space, thus being perfect for megastores with multiple categories and subcategories. 

2. When to use the Drawer Menu?

  • You want customers to browse and shop without leaving the menu.
  • Your product catalog has clear subcategories (e.g., accessories, gear types).
  • You want to display more collections or provide detailed navigation of your store.

3. How to set it up?

To make a Drawer menu fully yours, there are 3 processes to go through:

Process 1. 🤔 Organize menu items in the Shopify admin

STEP 1: In your Shopify admin, go to Content > Menus.

STEP 2: From here, you can:

  • Click on the title of the menu you want to edit
  • Or click “Add menu” to build a new one from scratch

STEP 3: Fill in the Name box to give your menu a name (this title won’t show up on the site)

STEP 4: Structure your menu:

  • To add a menu item, click “Add menu item”, enter its name, and assign a link (e.g., page, collection, product, or URL)
  • To create a nested menu, click “Add menu item” again, then drag it under another item by holding the dot icon. (⚠️ Note: Each level 2 nested menu item must link to a Product. 🚨)

STEP 5: Click “Save” when done.

🔖 Menu hierarchy example:


Process 2. 🤔 Assign the created menu to the Drawer Menu section

STEP 1: Go to Online Store > Themes > Customize.

STEP 2: In the Theme Editor, under Header, click “Add section”, then select Drawer menu.

STEP 3: In the Drawer menu section, find the Drawer menu setting on the right-side panel, click “Select”, then find and choose the menu you created as guided in process 1.

STEP 4: Click “Save” when done.


Process 3. 🤔 Customize the Tabbed Menu

You’ve finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action:


📌 3.1. To customize the whole main menu setting:

✨ To give the main menu a title:

Go to Header group > Drawer menu section > Find the Drawer menu section on the right panel. From here, you can:

STEP 1: Enter the desktop menu title into the Desktop drawer menu title field.

STEP 2: Enter the mobile menu title into the Mobile drawer menu title field.

⚠️Note: The drawer menu does not need a title to appear on the site.

✨ To open the first level of the menu:

Still in the Drawer menu section, locate the Desktop menu selection radio button and choose how the first level of the menu would be opened:

  • On hover (default option): Upon hovering over the first level menu item.
  • On click: Upon clicking on the first level menu item.

✨ To change how the drawer menu is displayed on the header

Still in the Drawer menu section, locate the Drawer menu style radio button and select whether the drawer menu icon on the header is displayed as Primary or Secondary.

✨ To change the spacing between menu items

Still in the Drawer menu section, adjust the Desktop block spacing (0-100px) to determine the space between the second level menu columns and the promotional banner.

✨ To manage the display of the drawer menu on mobile

Go to Header group > Drawer menu section > Find the Collection Images section on the right panel. Disable/Enable the Enable drawer menu on mobile option to hide/display the drawer menu on mobile.

📌 3.2. To show collection images on the menu

✨ To show/ hide images for the first level of the menu:

Go to Header group > Drawer menu section > Scroll down and find the Collection images section on the right panel.

In the Show 1st-level menu images setting, you will see 4 options:

  • None: Show no images.
  • Featured images: Show the main image you use for that collection in the admin.
  • First product image: Show the image of the first product in that collection.
  • Collection image metafield: Show the image using metafield, learn more in the next use case “✨ To show collection images on the menu using metafield”

⚠️ Note: This setting only applies to the menus that link to collections.

✨ To show collection images on the menu using metafield:

✍️ Why would you need to use metafield for collection images?

  • You want to show a designed image for the collection on the menu, without changing the featured images of that collection.
  • You want to show higher-resolution images on the menu.

✍️ How to do it?

STEP 1: Create a collection metafield: 

  • In Shopify admin, go to Settings> Custom data > Collection > Add definition.
  • Give your metafield a name, and choose type as File.
  • Click Save.

STEP 2: Assign a value for the collection metafield:

  • Go back to Shopify admin, and click on the Products > Collection tab.
  • Choose a collection, and scroll down to Metafields.
  • Upload an image in the newly created collection metafield.
  • Click Save.

STEP 3: Set up in Theme Editor: 

  • In Theme Editor (Visit it by clicking on Online store > Themes > Customize)
  • Click on Header > Drawer menu > scroll to Collection images setting group:
    • For Show 1st-level menu images and/or Show 2nd-level menu images, select Collection image metafield - based on which menu level you want to show images for.
    • For the Collection image metafield field: Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this Collection image metafield field.
  • Click Save.

✨ To show/ hide images for the 1st- level menus:

Go to Header group > Drawer menu section > Scroll down and find the Collection images section on the right panel > choose the Show 2nd-level collection image setting to be None.

✨ Change the image's position for 2nd-level menus:

Still in the Drawer menu section, find the Collection images section on the right panel > choose the Show second-level collection image setting to be Next to menu or Above menu.

✨ Change the image's ratio for 2nd-level menus:

Still in the Drawer menu section, find the Collection images section on the right panel > choose the 2nd-level image ratio.

📌 3.3. To customize a link in the 2nd-level menu:

✨ To set up a Drawer menu block in correspondence to your 2nd-level menu:

✍️ Why would you need to create a Drawer menu block?

  • As the drawer menu may contain multiple 2nd-level menus, you may want to set up those menu’s contents independently from each other.
  • In particular, the link and promotion images can be set up differently for each 2nd-level menu

✍️ How to do it?

STEP 1: Create a Drawer menu block: 

  • Go to Header group > Drawer menu section > Click “Add Block”.

STEP 2: Assign the newly created block a title:

  • Click on the newly created Drawer menu block.
    • Find the Drawer Menu setting group on the right panel.
    • Fill in the Menu Item field with the 2nd-level menu title that you want to set up contents for.
  • Click Save.

✨ To customize a link in the 2nd-level menu

Go to Header group > Drawer menu section > Drawer menu block > find the Drawer Menu setting group on the right panel:

  • Fill the "View all" link field with the link that you want to redirect customers to. 
  • Fill the "View all" link title field with the title that the customers see (‘View all’ by default) 

The added link is shown on the top right corner of the 2nd-level menu.

📌 3.4. To add & adjust promotion images on the 2nd-level menu:

3.4.1. To add promotion images to the 2nd-level menu:

⚠️ Note: You can add up to 2 promotion images. This guide covers Promotion 1 setting group - to add a second, repeat the same steps for Promotion 2.

✨ To set up a Drawer menu block in correspondence to your 2nd-level menu:

Follow the same instructions in part 3.3.

✨ Upload an image as the promotion:

Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotion 1 section on the right panel:

  • Upload an image to the Image setting.
  • (Optional) Upload a separate one made for Mobile image.

✨Add & adjust heading & text for the promotion:

Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotion 1 section on the right panel:

  • Enter the Heading and Text.
  • Adjust the Text size, Text alignment.
  • Change the Text color in light and dark version.

✨Make the text appear on the promotion images (text overlay).

Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotion 1 section on the right panel:

  • Toggle on Text overlay setting.
  • Drag to adjust the Overlay opacity.

3.4.2. To adjust the promotion images' overall look:

✨To change the position on a large screen:

Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotions section on the right panel > choose Position on large screen to be Left, Right or Bottom.

✨To change the promotion images layout to vertical or horizontal

Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotions section on the right panel > choose Layout on large screens to be Horizontal or Vertical.

✨To change the promotion images' height:

Go to Drawer menu section > Drawer menu block >  Scroll down and find the Promotions section on the right panel:

  • On desktop 🖥️: Drag the Desktop image height
  • On mobile 📱: Drag the Mobile image height

Need help? Contact our support team at Omni Themes Support.