Create your first navigation tree

Build a category hierarchy and add it to your storefront in about 10 minutes.

What you'll build

A navigation tree like this:

Clothing
├── Men's
│   ├── Shirts
│   └── Pants
└── Women's
    ├── Dresses
    └── Tops
Accessories

Prerequisites

  • TreeNav app installed
  • At least a few collections in your Shopify store

Step 1: Open TreeNav

  1. Go to your Shopify admin
  2. Click Apps in the sidebar
  3. Open TreeNav

If this is your first time, you'll see a welcome screen. Click Create your first tree to get started.

Step 2: Create a tree

  1. Click Create tree (or the button on the welcome screen)
  2. Enter a name like "Main Navigation"
  3. You'll be taken to the tree editor

Step 3: Add top-level categories

  1. Click Add collections
  2. In the collection picker, select your main category (e.g., "Clothing")
  3. Click Add
  4. The collection appears as a node with its title as the label

Repeat to add more top-level categories like "Accessories".

Step 4: Add nested categories

  1. Click the + button on the "Clothing" node
  2. Select "Men's" from the picker
  3. Click Add

Now add children under "Men's":

  1. Click + on the "Men's" node
  2. Select "Shirts"
  3. Click + on "Men's" again
  4. Select "Pants"

Repeat for "Women's" and its children.

Step 5: Customize labels (optional)

Each node has an independent label. To change it:

  1. Click on a node to select it
  2. Edit the label in the text field
  3. The label doesn't affect your Shopify collection title

Step 6: Organize with drag and drop

Adjust the order if needed:

  • Drag nodes up/down to reorder siblings
  • Drag onto another node to nest as a child
  • Drag left to un-nest (move up a level)

Step 7: Save your tree

  1. Click Save in the save bar at the bottom
  2. Your tree is now published and synced to your storefront
  3. Note the Tree ID shown in the dashboard — you'll need it for theme setup

Step 8: Add to your theme

  1. Go to Online Store → Themes → Edit theme
  2. Click App embeds in the left sidebar
  3. Enable Tree embed
  4. Enter your Tree ID in the settings
  5. Choose your layout:
    • Sidebar for vertical filters
    • Drawer for mobile filter drawers
    • Topbar for horizontal filters
  6. Click Save

Step 9: Preview

  1. Navigate to a collection page in the preview
  2. Your tree navigation should appear in the filter area
  3. Test expanding/collapsing nodes
  4. Click a collection to navigate

Troubleshooting

Tree not appearing:

  • Enable Debug mode to see detection status
  • Try a different layout option
  • Use Custom position with a CSS selector for your theme

Wrong position:

  • Try different Placement options (Inside start/end, Before/After)
  • Configure desktop and mobile separately

Next steps