Smart Category Menu

Set up Volume's smart category menu for stores with 2–4 categories: create landing pages, assign menus per category, and link products via metafields.

If your store has 2–4 top-level categories (e.g., gender/audience-based: Men / Women / Kids or department-based: Clothing / Shoes / Bags), the Smart Category Menu feature can significantly enhance the UX.

1. Have kind of separate Home pages for each top-level category — each with its own relevant sections. With a dynamic bottom menu based on which top-level category item the user selects.
2. Add a third nested menu level in addition to Shopify's standard two levels.
3. Display the top-level category as part of the breadcrumb path to make it easier to navigate back to broader categories without confusion.
4. Optionally, build a minimalist homepage that directs users to one of the top-level categories.

---

Setting Up the Smart Category Menu

Quick overview

1. Define your top-level categories — you can base them on gender/audience (e.g., Men / Women / Kids) or department (e.g., Clothing / Shoes / Bags).
2. Next, determine the collections and subcollections that will belong to each top-level category.
3. Create category-specific landing pages.

1

Step 1 — Create category landing pages

• Start with the Home page layout: Use the Home page to build the layout for your first top-level category. Add necessary sections that highlight collections and products from this category (e.g., banners, featured collections, featured products, etc.).
• The second top-level category will be based on the collection template. You can set things up in the Theme Editor section by section (choose Collections → parent-collection-2), or you can copy all the settings from the Home page and then update the sections with the collections and products that belong to the second top-level category. Copy Home page layout into the collection template: 1. Go to Online Store → Edit Code → Open index.json 2. Copy the entire contents of index.json 3. Paste them into templates/collection.parent-collection-2.json 4. Save!
• Create a duplicate of the existing template for the next top-level category to maintain consistency in layout and user experience: go to Collections → Create template, enter a name, and select parent-collection-2 in the Based on dropdown.

• Repeat the process for all top-level categories.

Optional: You can set up a minimalist Home page template as the hub page that directs users to individual landing pages, and assign all top-level categories to collection templates.

Hub page example:

2

Step 2 — Assign templates to collections

After creating the templates, go to the corresponding Collections in the Shopify admin and assign the created templates.

3

Step 3 — Create the Top-Level Menu

In Shopify admin → Content → Menus, click Add menu in the top right corner or select one of the existing menus.

Add your Top-Level Categories at the first level.

Set the first item to Homepage (if using a redirecting homepage setup, all items should link to collections).

4

Step 4 — Create menus for each Top-Level category

In Shopify admin → Content → Menus, click Add menu.

Add menu items.

Important: The handle of each menu must match the exact name of the corresponding Top-Level category item.

5

Step 5 — Assign the menu in the Header

Once you've created all the menus for each Top-Level Category, you need to assign one menu to the header:

1. Go to the Header section
2. Select the Top-Level Category menu under the Menu heading
3. Check the box Enable smart category menu

6

Step 6 — Assign collections and products to Top-Level Categories

This ensures that when a user first opens a collection or product, the correct menu appears in the Bottom bar.

Create a metafield for collections:

1. Go to Settings → Metafields and metaobjects → Collections
2. Click Add definition and fill in the fields as follows:

   • Name: Top level category
   • Namespace and key: custom.top_level_category — must be exactly like this
   • Type: Single line text, One value
3. Click Save

Bulk edit collections:

1. Go to Products → Collections
2. Check the box, select Select all collections, then click Bulk edit
3. Click Columns, select Metafields → Parent collection, and hide any unnecessary fields
4. Now, without significant time loss, you can assign each collection to its Top-Level Category

7

Final step — assign products to Top-Level Categories:

To do this, simply add a tag to each product that matches the Top-Level Category name.

If you don't want to use tags, you can create the same metafield for products as you did for collections:

• Go to Settings → Metafields and metaobjects → Product
• Click Add definition
• Follow the same steps as described earlier for collections.