Add TreeNav to your theme

Configure TreeNav blocks in your Shopify theme.

Before you start

Make sure you have:

  • Created at least one tree in TreeNav
  • Copied the Tree ID (dashboard → tree menu → Copy ID)

Adding the tree embed

The tree embed auto-injects navigation into your theme's filter area.

Step 1: Open theme editor

  1. Go to Online Store → Themes
  2. Click Edit theme on your active theme

Step 2: Enable the embed

  1. Click App embeds in the left sidebar
  2. Toggle on TreeNav Tree

Step 3: Configure settings

  1. Paste your Tree ID
  2. Choose Desktop filters location:
    • Sidebar – For vertical filter sidebars
    • Top bar – For horizontal filter bars
    • Drawer – For slide-out drawers
    • Custom position – Enter your own CSS selector
  3. Choose Mobile filters location (same options)
  4. Adjust other settings as needed

Step 4: Save and test

  1. Click Save
  2. Navigate to a collection page in preview
  3. Verify the tree appears in the correct location

The breadcrumb block shows the path to the current collection.

Step 1: Navigate to template

  1. In theme editor, click the page selector at top
  2. Choose Collections → Default collection

Step 2: Add the block

  1. Click Add section (or Add block in an existing section)
  2. Select TreeNav Breadcrumb from the Apps tab

Step 3: Configure

  1. Paste your Tree ID
  2. Set Home link text (or leave blank to hide)
  3. Choose Separator style (Slash, Chevron, Arrow, Custom)
  4. Adjust colors and spacing

Step 4: Position

Drag the section to position it:

  • Above the main content for best visibility
  • Below the header for seamless integration

Step 5: Save and test

  1. Save the theme
  2. Navigate to different collection pages
  3. Verify the breadcrumb shows the correct path

Adding the drilldown block

The drilldown block shows sibling categories as horizontal pills.

Step 1: Navigate to collection template

  1. In theme editor, select a collection page template
  2. Drilldown only works on collection pages

Step 2: Add the block

  1. Click Add section or Add block
  2. Select TreeNav Drilldown

Step 3: Configure

  1. Paste your Tree ID
  2. Set Back link text (e.g., "← [parent]")
  3. Set All link text (e.g., "All") or leave blank
  4. Choose display mode: Slider or Stacked
  5. Adjust colors to match your theme

Step 4: Position

  • Above the product grid for quick category switching
  • Below the header for prominent navigation

Step 5: Save and test

  1. Save the theme
  2. Test on collection pages at different tree levels
  3. Verify pills show siblings correctly

Using multiple blocks together

For comprehensive navigation, use all three:

  1. Tree – In sidebar for full hierarchy browsing
  2. Breadcrumb – At top for location awareness
  3. Drilldown – Above products for quick sibling navigation

Each block uses the same Tree ID but serves a different purpose.

Checking your setup

Verify tree embed

  1. Enable Show debug panel temporarily
  2. Check that desktop and mobile show ✓
  3. Disable debug mode before publishing

Verify breadcrumb

  1. Navigate to a nested collection
  2. Confirm path shows correctly
  3. Click breadcrumb links to verify they work

Verify drilldown

  1. Navigate to a collection with siblings
  2. Confirm pills appear
  3. Test the back and all links

Common issues

Block not appearing:

  • Verify Tree ID is entered correctly
  • Check that the tree is saved/published
  • For tree embed, try different layout options

Wrong tree showing:

  • Double-check the Tree ID in block settings
  • Each block can use a different tree

Styling issues:

  • Adjust color settings in block configuration
  • Add custom CSS for fine-tuning

Next steps