> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to build a category tree and show it in your store

> Build a category tree from levels and groups, then switch on tree navigation so shoppers browse your listings by path.

![The Category trees card listing two trees, each with its drag handle, title and slug, beside the Add button](https://mintcdn.com/twicecommerce/5LquhxPwgpXCG85U/images/settings-categories-taxonomies.webp?fit=max\&auto=format\&n=5LquhxPwgpXCG85U\&q=85\&s=311d33270d2e8dab89d8e965462c8eaf)

> **[Open in TWICE Admin](https://admin.twicecommerce.com/settings/content/categories-and-taxonomies)**
>
> settings/content/categories-and-taxonomies

Build a tree under **Settings → Categories & Taxonomies**, then switch on tree navigation in the theme editor. The result is a shop where shoppers narrow your listings step by step, such as Bikes, then Electric, then Under 20 kg.

## Prerequisites

> [!WARNING]
>
> **Required permissions:** **Create and edit collections** to build and edit trees, and **Edit online store** access to switch tree navigation on. All four system roles hold both.

> [!NOTE]
>
> Decide the path before you build. Pick the collections, attribute, categories or tags that already group your listings. A tree narrows listings by what they carry, so a listing with no matching tag or attribute never reaches that group.

## The walkthrough

**1. Create the tree**

Select **Add** under **Settings → Categories & Taxonomies**. TWICE creates a tree named **New category tree** and opens its editor.

**2. Name the tree and set its slug**

In the **Details** card, enter a **Title**. Edit the **Slug** if you want a different address. Shoppers reach the tree at `/shop/{slug}` on your store.

The save fails if another tree already uses the slug.

**3. Add a level**

In the **Levels** card, select **Add level** and choose a source: **Collections**, **Attribute**, **Categories** or **Tags**. Pick the collections, attribute values or tags the level uses. Leave the **Categories** level empty to use every category in use.

Each level creates one group per value you pick.

**4. Add a second level beneath the first**

Select **Add level** again. Each new level divides the groups of the level above, so an audience attribute followed by categories gives every audience and category path. Move a level with the arrows, or remove it with **Remove level**.

**5. Trim the generated groups**

Open the **Structure** card. Expand a group to see what is beneath it. Select **Hide this group** on any generated group you do not want. Select **Show this group** to bring it back.

**6. Add a group of your own**

Select **Add group** to add a group at the top level, or **Add group beneath** on a row to add one under it. Choose what it narrows by in **Narrows the listings by**:

| Option | Use it for |
| - | - |
| **Collection** | A collection of listings |
| **Attribute value** | One value of an attribute |
| **Category** | A taxonomy category |
| **Tag** | A tag |
| **Nothing (a label)** | A heading that groups the groups beneath it, with no filter of its own |

Leave **Title (optional)** empty to use the name of the collection, value, category or tag. A label needs a **Label**. Select **Add group** to confirm.

**7. Set the order**

Choose **Alphabetical** or **Custom** in **Sort**. Drag a group by its handle to place it. Dragging a group before a sibling switches the whole tree to **Custom**.

**8. Save the tree**

Select **Save**. Edits to the title, slug and structure wait until you save.

**9. Order your trees**

Back on **Settings → Categories & Taxonomies**, drag the trees into the order the store should show them.

**10. Switch on tree navigation**

Open the theme editor under **Sales channels → Online store**. Open the **Collection page** and select **Category trees**. Switch on **Category tree navigation**.

Leave **Select category trees** empty to show every tree, including trees you add later. Pick trees to show only those.

**11. Choose how the trees display**

Set **Display** to one of the styles:

| Style | Kind | What shoppers get |
| - | - | - |
| **Expandable menu** | Menus | Every tree in full, with any branch open to jump to |
| **Focused menu** | Menus | A step back, the pages alongside and the next level down |
| **Step-by-step menu** | Menus | One level at a time, with a link back |
| **Checkbox tree** | Filters | Every tree in full, with several groups ticked to see their listings together |

**12. Add the trees to the header**

Open **Header** in the theme editor. Under **Shop link**, set **Type** to **Mega menu**, **Dropdown** or **Link only**, and pick the trees it opens. **Shop link** appears once the store shows a tree.

To add a tree as its own menu item, open **Navigation items**, set **Page** to **Category trees**, and set **Dropdown** to **No dropdown**, **One level** or **Two levels**.

**13. Save the theme editor**

Select **Save**. The change goes live on your store straight away.

![A category tree editor with the Details, Levels and Structure cards, one level built from three collections and the groups it generated](https://mintcdn.com/twicecommerce/5LquhxPwgpXCG85U/images/settings-category-tree-editor.webp?fit=max\&auto=format\&n=5LquhxPwgpXCG85U\&q=85\&s=cd9796b96fbfbbb2a18c68a6cb155014)

## How do I know it worked?

* The tree appears in the **Category trees** list with the title and slug you set.
* The **Structure** card shows the groups you expect, and each expands to show its groups.
* Your online store shows the Shop menu or the shop page with your groups at `/shop/{slug}`.
* Selecting a group shows only the listings that match every group above it.

## Troubleshooting / common pitfalls

> **The store still shows collections only**
>
> Tree navigation is off until you switch it on. Open the **Collection page** in the theme editor, select **Category trees**, and switch on **Category tree navigation**. A store with no tree also shows collections.

> **A group is missing from the store**
>
> A group with no matching listings is left out of the storefront. Check that the listings carry the tag, attribute value or category the group narrows by, or sit in the collection it uses.

> **The tree could not be saved**
>
> The slug may already be in use by another tree. Change the **Slug** and save again. A tree also holds at most 500 groups that you add yourself.

> **This category tree makes more groups than can be shown**
>
> The levels produce too many groups, so some are left out. Use fewer levels, or pick fewer values in them. A level takes at most 100 values, and a tree goes six levels deep.

> **I cannot add a group of hand-picked listings**
>
> The **Hand-picked listings** option appears only on a group that already holds listings placed by hand. The editor does not place listings yet. Use a collection or a tag to pick the listings, then use that collection or tag as the group.

> **Dragging a group switched my sort to Custom**
>
> Placing a group before a sibling arranges groups by hand, so the tree changes from **Alphabetical** to **Custom**. TWICE tells you when it happens. Switch **Sort** back to **Alphabetical** to undo it.

## Related articles

> **[Category tree](/docs/concepts/catalog/category-trees)**
>
> How a path narrows and why a collection can sit in several trees.

> **[Categories & Taxonomies](/docs/settings/categories-taxonomies)**
>
> The settings view where you list, order and delete trees.

> **[Build a collection](/docs/guides/catalog/build-a-collection)**
>
> Build the collections a tree uses as groups.

> **[Theme editor: Collection page](/docs/sales-channels/online-store/theme-editor/pages/collection)**
>
> The page where tree navigation lives.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.