> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/navigation/smart-category-menu.md).

# Smart Category Menu

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

{% embed url="<https://www.youtube.com/watch?v=Nihy7gOX4Wk>" %}

### 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**.

{% stepper %}
{% step %}

### 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.

<figure><img src="/files/VPesFp5kijJ30EFvOezv" alt=""><figcaption></figcaption></figure>

* Repeat the process for all top-level categories.

{% hint style="success" icon="lightbulb" %}
**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**.

<p align="center"><img src="/files/Dx7yfW2OHAr6TfpODp0g" alt="" data-size="original"></p>

<p align="center"><strong>Hub page example:</strong></p>

<p align="center"><img src="/files/1asPTW4JZfXwGZxid5n4" alt=""></p>
{% endhint %}
{% endstep %}

{% step %}

### Step 2 — Assign templates to collections

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

<figure><img src="/files/3eo6CFjDEcVGLMlNcKC7" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### 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).

<figure><img src="/files/Cg9cy5n6DdQTsbGHeU7V" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Step 4 — Create menus for each Top-Level category

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

Add menu items.

<figure><img src="/files/qFt0ebSM0ME2xnQsRy1g" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Important:** The **handle** of each menu must match the exact name of the corresponding **Top-Level category** item.
{% endhint %}
{% endstep %}

{% step %}

### 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**
   {% endstep %}

{% step %}

### 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**

<figure><img src="/files/QUOiHlYgeQpxk1HJhACV" alt=""><figcaption></figcaption></figure>

**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**

<figure><img src="/files/zdRMX696orawM5xaNuBk" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **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.

<figure><img src="/files/2SVwoFvWWcADkX4YWcdz" alt=""><figcaption></figcaption></figure>

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

* Go to **Settings → Metafields and metaobjects → Product**
* Click **Add definition**
* Follow the same [steps as described earlier for collections](#step-6-assign-collections-and-products-to-top-level-categories).
  {% endstep %}
  {% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/volume-themes/navigation/smart-category-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.