Using multiple trees

Create different navigation trees for different areas of your store.

Why multiple trees?

You might want separate trees for:

  • Different departments – Clothing vs. Home & Garden
  • Different navigation styles – Full hierarchy vs. focused subcategory
  • Seasonal navigation – Holiday shop, Sale items

Understanding block types

TreeNav has two types of theme integration:

App embed (Tree embed)

  • Global – Only one Tree embed per store
  • Single Tree ID – Cannot change per page
  • Auto-injects – Finds filter areas automatically

App blocks (Breadcrumb, Drilldown)

  • Per-template – Add to specific templates
  • Multiple allowed – Different blocks can use different Tree IDs
  • Manual placement – You position them in the template

Key point: To use different trees on different pages, use app blocks, not the embed.

Creating multiple trees

  1. Open TreeNav app
  2. Click Create tree for each navigation you need
  3. Name them descriptively:
    • "Main Navigation"
    • "Clothing Department"
    • "Sale Categories"

Each tree has its own ID.

Using different trees with app blocks

Since Breadcrumb and Drilldown are app blocks, you can:

  1. Add them to different collection templates
  2. Set different Tree IDs in each

Example setup:

  • Default collection template: Breadcrumb with "Main Navigation" tree
  • Sale collection template: Drilldown with "Sale Categories" tree

Using different trees on different pages

Method: Different collection templates

  1. Create collection templates in your theme:
    • Go to Online Store → Themes → Edit theme
    • Navigate to a collection page
    • Click the template dropdown and create new templates
  2. Add TreeNav blocks to each template:
    • Add Breadcrumb or Drilldown block
    • Set the appropriate Tree ID
  3. Assign templates to collections:
    • Go to Products → Collections
    • Edit each collection
    • Select the template in Theme template dropdown

Example: Department store

Setup:

  1. Create "Clothing" tree – All apparel categories
  2. Create "Home" tree – Home & garden categories

Implementation:

  1. Create collection.clothing template with Drilldown using Clothing tree
  2. Create collection.home template with Drilldown using Home tree
  3. Assign clothing collections to collection.clothing template
  4. Assign home collections to collection.home template

What about the tree embed?

The Tree embed is global and uses one Tree ID for all pages. Options:

Option 1: Use one primary tree

  • Set the embed to your main navigation tree
  • Use app blocks for specialized navigation on specific pages

Option 2: Disable embed, use blocks only

  • Set embed to "Don't integrate" for both desktop and mobile
  • Add Breadcrumb/Drilldown blocks to templates as needed
  • More control, but requires manual setup per template

Option 3: Seasonal updates

  • Update the tree's structure seasonally in the TreeNav app
  • Same Tree ID, different content
  • No theme changes needed

Keeping trees in sync

If you use the same collections in multiple trees:

  • Handle changes sync automatically to all trees
  • Deletions flag nodes in all affected trees
  • You'll need to fix issues in each tree separately

Best practices

Naming convention

Use clear, descriptive names:

  • "Main Sidebar Navigation"
  • "Holiday 2024 Gift Guide"
  • "Sale Categories"

Consider if you need multiple trees

If trees share many collections:

  • A single well-structured tree often works better
  • Use contextual navigation to show relevant branches

Document your setup

Keep notes on:

  • Which tree is used where
  • Why separate trees exist
  • Template assignments

Limitations

  • Tree embed uses one Tree ID globally
  • App blocks must be configured per template
  • No automatic tree switching based on URL or collection

Next steps