Maximize Theme User Guide

Search limit to:






Categories Menu
Ask AI
Open in ChatGPT
Ask ChatGPT about this page
Open in Claude
Ask Claude about this page

1. What is the Categories Menu?

The Categories Menu is a mega menu block that presents your store's category navigation as a vertical drawer panel. Clicking the trigger in the header slides open a side drawer displaying a multi-level category tree - up to 3 levels deep - with optional collection images at each level.

Unlike the Drawer menu (which is a standalone section fixed beside the logo), the Categories menu is a block that lives inside the Header section's megamenu row. It can be:

  • Fixed to either end of the megamenu row (left or right) - so it stays in place regardless of which other mega menu items are open. This is the default behavior.
  • Positioned inline within the megamenu - it falls into the natural order of blocks inside the Header section, sitting alongside other menu blocks.

2. When to use the Categories Menu?

  • Your store has a large number of product categories that would overwhelm a standard horizontal navigation bar.
  • You want an always-accessible category overview that coexists alongside your other mega menu blocks without competing for horizontal space.
  • You want shoppers to be able to drill down through multiple category levels quickly using a familiar side drawer UI.
  • You need to display collection images alongside category links to help customers navigate visually.

3. How to set it up?

To make a Categories 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., collection, page, product, or URL).
  • To create nested levels, drag an item under another by holding the dot icon. The Categories menu supports up to 4 levels.

STEP 5: Click "Save" when done.

🔖 Menu hierarchy example:

Process 2. 🤔 Add and assign the Categories Menu block in the Theme Editor

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

STEP 2: In the Theme Editor, under Header, click the Header section.

STEP 3: Click "Add block", then select Categories menu.

⚠️ Note: Only 1 Categories menu block can be added per header.

STEP 4: 

In the Menu item field, enter a label to display as text in the header navigation row (e.g., "Shop by Category"). This field is optional — if left blank, the trigger will display using the icon set in Trigger icon only.

⚠️ Note: At least one of Menu item (text) or Trigger icon (icon) should be configured for the trigger to appear meaningfully in the header.

STEP 5: Find the Menu setting, click "Select", and choose the menu you created in Process 1.

STEP 6: Click "Save" when done.

Process 3. 🤔 Customize the Categories Menu

You've finished 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 control where the Categories Menu appears in the header row:
✨ To pin it to the left or right end of the megamenu row (recommended):

Go to Header section > Categories menu block > Trigger group > make sure Keep drawer menu fixed (Desktop) is toggled ON (this is the default).

Then set Menu position to Left or Right to choose which end of the megamenu row the block is pinned to.

When fixed, the Categories Menu trigger stays in place even while other mega menu items are open - it does not shift or overlap with the rest of the navigation.

  • Left side:

  • Right side:
✨ To place it inline within the megamenu:

Go to Header section > Categories menu block > Trigger group > toggle Keep drawer menu fixed (Desktop) OFF.

The block will now follow its position in the block order within the Header section - sitting alongside other menu blocks (Column menu, Tabbed menu, etc.) in the standard megamenu flow.

⚠️ Note: The Menu position (Left/Right) setting is only available when Keep drawer menu fixed (Desktop) is ON.
📌 3.2. To show or hide the Categories Menu on mobile:

Go to Header section > Categories menu block > Visibility group > toggle Enable on mobile.

  • ON: The category drawer is accessible on mobile devices.
  • OFF (default): The block is hidden on mobile - only visible on desktop.
📌 3.3. To change the trigger icon:

Go to Header section > Categories menu block > Trigger group > use the Trigger icon dropdown. Choose from:

  • None - No icon; only the menu item label is shown.
  • Hamburger - A standard three-line hamburger icon.
  • Menu bar (default) - A menu bar icon displayed next to the label.
  • Custom - Upload your own icon image. When selected, a Custom icon image picker appears below.
📌 3.4. To customize menu item colors:

Go to Header section > Categories menu block > Menu item style group. From here you can set:

  • Item background (light) / Item background (dark): Background color of each item in the drawer for light and dark mode. Default is Transparent.
  • Item text (light) / Item text (dark): Text color of each item for light and dark mode. Default is Transparent (inherits from the active color scheme).

⚠️ Note: Leaving a color as Transparent will fall back to the text color defined in your theme's active color scheme.
📌 3.5. To show collection images for Level 2 menu items:
✨ To show/hide images at Level 2:

Go to Header section > Categories menu block > Menu – Level 2 group > use the Show images for level 2 menu dropdown:

  • None - No images shown.
  • Featured image (default) - Shows the main collection image set in Shopify admin.
  • First product image (for collection) - Shows the first product image in that collection (displays a placeholder if none exists).
  • Collection image metafield - Shows an image from a custom metafield. See the next use case for setup steps.

⚠️ Note: This setting only applies to menu items that link to collections.
✨ To show collection images using a metafield at Level 2:

✍️ Why use metafield for collection images?

  • You want to show a custom-designed image for the collection in the menu without changing its featured image in the admin.
  • You want to show higher-resolution images in the menu.

✍️ How to do it?

STEP 1: Create a collection metafield in Shopify admin:

  • Go to Settings > Custom data > Collections > Add definition.
  • Give it a name, set type to File, and click Save.

STEP 2: Assign an image to each collection:

  • Go to Products > Collections, open a collection, scroll to Metafields, and upload an image in your newly created field. Click Save.

STEP 3: Connect the metafield in the Theme Editor:

  • Go to Header section > Categories menu block > Menu – Level 2 group.
  • Set Show images for level 2 menu to Collection image metafield.
  • In the Level 2 image metafield field, enter the key of your metafield - use only the part after custom. (e.g., enter collection_image if your full key is custom.collection_image).

⚠️ Note: The Level 2 image metafield field only appears when Show images for level 2 menu is set to Collection image metafield. If left blank, no image will be shown.
📌 3.6. To show collection images and adjust the layout for Level 3 menu items:
✨ To show/hide images at Level 3:

Go to Header section > Categories menu block > Menu – Level 3 group > use the Show images for level 3 menu dropdown. Options and metafield setup are the same as Level 2 - see section 3.5 above for the metafield guide.
✨ To change how images are positioned at Level 3:

Go to Header section > Categories menu block > Menu – Level 3 group > use Image position (visible when images are enabled):

  • Above menu - The collection image appears above the list of Level 3 links.
  • Next to menu - The collection image appears beside the menu links.
✨ To change the image ratio at Level 3:

Go to Header section > Categories menu block > Menu – Level 3 group > choose your preferred Level 3 image ratio (visible when images are enabled):

Natural, Square (1:1), Landscape (4:3) (default), Wide (16:9), Portrait (2:3), Standard (3:4).
✨ To control the number of columns at Level 3 on desktop:

Go to Header section > Categories menu block > Menu – Level 3 group > drag the Max level 3 columns (Desktop) slider.

Range: 1–4. Default: 4. This controls the maximum number of Level 3 items per row on desktop.
✨ To adjust the gap between Level 3 columns on desktop:

Go to Header section > Categories menu block > Menu – Level 3 group > drag the Level 3 column gap (Desktop) slider.

Range: 1–100px. Default: 20px.

4. Change Logs

  • Version 1.5.0: Categories menu block first introduced as a new block option in the Header section.

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