Display options

Product counts

Show the number of products in each collection next to the label.

Enabling counts

1. Go to Online Store → Themes → Edit theme
2. Open App embeds → TreeNav Tree
3. Enable Show product counts
4. Save

Display format

Counts appear in parentheses after the label:

Clothing (42)
├── Men's (18)
│   ├── Shirts (8)
│   └── Pants (10)
└── Women's (24)

Styling counts

Counts use a muted style by default. Customize with CSS:

.treenav__count {
  color: #666;
  font-size: 0.875em;
}

Auto-expand behavior

Control which nodes are expanded when the page loads.

Options

Recommended settings

• Desktop sidebar: Current path (show context without overwhelming)
• Mobile drawer: None (save space, let users drill down)
• Small trees: All (if only 10-15 nodes total)

Setting auto-expand

1. Open TreeNav Tree settings
2. Find Auto-expand
3. Choose your preferred option
4. Save

Accordion mode

Only one branch can be expanded at a time. Expanding a node collapses its siblings.

When to use

Accordion mode is useful when:

• Tree has many top-level categories
• Screen space is limited
• You want focused navigation

Enabling accordion mode

1. Open TreeNav Tree settings
2. Enable Accordion mode
3. Save

Behavior

Before clicking "Women's":
▼ Men's
  • Shirts
  • Pants
• Women's
• Kids

After clicking "Women's":
• Men's           ← Collapsed
▼ Women's
  • Dresses
  • Tops
• Kids

Collapsible header

The tree embed can have a collapsible header that shows/hides the entire tree.

Options

Heading text

Customize the header text:

• Default: "Categories"
• Change to match your store: "Shop by Category", "Browse", etc.

Use cases

• Sidebar: Usually no header or collapsible open
• Topbar: Often collapsible, displayed as dropdown
• Mobile: Collapsible to save space

Display as dropdown

For topbar/horizontal layouts, show the tree in a dropdown panel.

How it works

1. Tree appears as a button/heading
2. Clicking opens a dropdown panel
3. Tree content displays inside the panel

When to use

• Horizontal filter bars
• Space-constrained areas
• Topbar navigation

Enabling dropdown

1. Set layout to Topbar or Custom position
2. Enable Display as dropdown
3. Adjust Panel max width if needed

Indent and spacing

Fine-tune the visual hierarchy.

Indentation

Controls how much child nodes are indented:

• 12px: Compact, saves space
• 16px: Standard, balanced
• 20px: Spacious, clearer hierarchy

Vertical gap

Space between nodes:

• 2px: Dense, many nodes visible
• 4px: Standard
• 6-8px: Airy, easier to tap on mobile

Item padding

Padding inside each node row:

• 4px: Minimal
• 6px: Standard
• 8-10px: Generous, better for touch

Font size

Match your theme's typography:

Toggle button position

The expand/collapse toggle can appear on either side:

• Right: Standard, toggle at end of row
• Left: Toggle before label, common in some interfaces

Choose based on your theme's conventions and reading direction.

Quick reference

Next steps

• Match your theme's style for colors
• Contextual navigation for drill-down mode