Tree menu

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

1. What is Tree Menu?

The Tree Menu is a mega menu layout that displays categories and sub-categories in a clear, hierarchical structure (up to 3 levels). This menu is designed to help customers navigate complex catalogs with ease.

2. When to use Tree menu?

Your categories have multiple sub-categories (2 levels or more).
You want to display related products or collections together in a structured way.
Your catalog is too complex for a simple dropdown menu.
Customers need to browse by type, use case, or product family.

3. How to set it up?

To make a Tree 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 to the collections.
To create a nested menu, click "Add menu" item again, then drag it under another item by holding the dot icon.

STEP 5: Click "Save" when done.

⚠️ Note: Only the 1st & 2nd levels of the menu in your Shopify Admin will be shown outside the store.

Process 2. 🤔 Assign the created menu to the Tree menu block

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

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

STEP 3: Click "Add block", then tap on the Tree menu.

STEP 4: 📌 Important step: Give the main menu a title

Enter the menu title in the Menu Item field.

⚠️Note: You must enter this field for your menu to appear on the site.

STEP 5: Still in the Tree menu block, find the Menu setting, click "Select", then find and choose the menu you created as guided in process 1.

STEP 6: Click "Save" when done.

Process 3. 🤔 Customize the Tree 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 attach a link for the main menu:
In Theme Editor > Header section > *Tree menu* block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab.
📌 3.2. To add a label to the menu:
In the Theme Editor, go to Header section > *Tree menu* block > Scroll down and find the Menu label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label.
📌 3.3. To make the menu visible on mobile:
In the Theme Editor, go to Header section > *Tree menu* block > Visibility settings group > Toggle Enable on mobile ON.

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