FAQ & troubleshooting

Common questions and solutions for TreeNav users.

General

What is TreeNav?

TreeNav lets you organize your Shopify collections into parent-child hierarchies and display them as interactive navigation on your storefront. Create multi-level category trees, breadcrumbs, and drilldown navigation without any code.

How many trees can I create?

Unlimited. Create as many navigation trees as you need for different parts of your store.

Does TreeNav work with my theme?

TreeNav works with any Online Store 2.0 theme. The navigation blocks are added through the theme customizer, just like other app blocks.

Do I need to edit any code?

No. TreeNav uses Shopify's theme app extension system. Everything is configured through the visual theme customizer.

Features

What's the difference between the three block types?

Tree Embed – Expandable navigation showing your full hierarchy. Auto-injects into collection and search pages.
Breadcrumb – Path trail showing current location. Works on collection, product, and other page types. Includes SEO schema.
Drilldown – Horizontal pills for sibling/child categories. Best for quick category switching on collection pages.

Can I customize the appearance?

Yes. Each block includes settings for colors, fonts, spacing, and behavior. You can also add custom CSS in your theme settings.

Does TreeNav include product counts?

Yes. The tree embed can optionally display product counts for each collection.

Can I use different labels than my collection titles?

Yes. Each node in your tree has an independent label. Changing it won't affect your collection title in Shopify, and vice versa.

Setup & configuration

How do I add the tree embed?

Go to Online Store → Themes → Edit theme
Click App embeds in the left sidebar
Enable Tree embed
Enter your Tree ID and configure layout options
Save

How do I add breadcrumb or drilldown blocks?

Go to Online Store → Themes → Edit theme
Navigate to a collection page template
Click Add block or Add section
Select Breadcrumb or Drilldown
Enter your Tree ID in the block settings

Can I show different trees on different pages?

Yes. Each block instance has its own Tree ID setting. You can configure different trees for different page templates.

How do I create nested categories?

In the tree editor, drag a collection onto another to nest it as a child. Or click the + button on a node to add children underneath it.

Sync & updates

How does auto-sync work?

When you add or delete collections in Shopify, or change a collection's URL handle, TreeNav receives a webhook notification and automatically updates your trees. Changes appear on your storefront within seconds.

What happens if I delete a collection?

The collection is marked as "deleted" in your tree editor with a visual indicator. You can then choose to remove it or replace it with another collection.

Do I need to manually sync after making changes?

No. Trees sync automatically when you save in the editor. Collection changes from Shopify sync via webhooks automatically.

If I rename a collection in Shopify, does my tree update?

The tree node keeps its own label (which you set in the editor). Only the collection's URL handle syncs automatically. This lets you use custom navigation labels independent of your Shopify collection titles.

Performance

Does TreeNav slow down my store?

No. TreeNav is optimized for performance:

JavaScript files are under 10KB (minified)
No external API calls on your storefront
Navigation data is stored in Shopify metafields
CSS uses efficient selectors with no layout thrashing

Does TreeNav affect my Lighthouse score?

TreeNav is designed to have minimal impact on performance scores. The JavaScript loads asynchronously and doesn't block rendering.

Accessibility

Is TreeNav accessible?

Yes. TreeNav meets WCAG 2.1 AA standards:

Full keyboard navigation (ARIA tree pattern)
Screen reader support with proper ARIA labels
Visible focus indicators
Reduced motion support
High contrast mode support
RTL language support

Does the breadcrumb block include SEO schema?

Yes. The breadcrumb block automatically includes Schema.org BreadcrumbList markup, which search engines use for rich snippets.

Data & privacy

What data does TreeNav store?

TreeNav stores your navigation trees, app settings, and collection mappings. We do not collect or store any customer data.

What happens when I uninstall?

All your data is deleted immediately when you uninstall, including trees, settings, and cached data. Shopify automatically removes app-owned metafields.

Where is my data stored?

Navigation trees are stored in our secure database and synced to Shopify metafields on your store for fast storefront access.

Troubleshooting

My navigation isn't showing on the storefront

Check that your tree is published (saved in the TreeNav editor)
Verify the block is enabled in the theme customizer
Make sure you've entered the correct Tree ID
For embeds: confirm you're on a collection or search page
Preview the theme to confirm it's working

I can't see my collections in the picker

TreeNav needs the read_products permission to access collections. Try reinstalling the app if collections don't appear.

The tree embed isn't injecting into my theme

Enable Debug mode in embed settings
Check the debug panel at the bottom of the page
Try a different layout option (Sidebar, Drawer, Topbar)
Use Custom position with a specific CSS selector for your theme

Collection picker doesn't work on mobile

The Shopify collection picker has a known issue on mobile devices. Use a desktop browser to edit your trees.

Breadcrumb shows wrong path

If a collection appears multiple times in your tree, TreeNav uses the first occurrence. For products, TreeNav finds the deepest matching collection. Reorganize your tree if the path isn't what you expect.