Match your theme's style

Overview

TreeNav blocks include extensive styling options. This guide helps you configure them to match your theme.

Step 1: Identify your theme's style

Before configuring TreeNav, note your theme's:

1. Text color – Open DevTools, inspect body text
2. Font size – Check your theme's filter or navigation text
3. Accent color – Your theme's primary/link color
4. Spacing – Padding used in similar components

Step 2: Configure tree embed colors

1. Open theme editor → App embeds → TreeNav Tree
2. Adjust these settings:

Example: Dawn theme

Text color: #121212
Hover text: #121212
Active text: #121212
Active background: #f3f3f3

Example: Bold accent theme

Text color: #333333
Hover text: #ff6600
Active text: #ff6600
Active background: transparent

Step 3: Configure spacing

Match your theme's density:

Most themes use Standard values. Check your theme's filter area for reference.

Step 4: Configure breadcrumb

1. Open theme editor → Add TreeNav Breadcrumb
2. Match these settings:

Colors:

• Link color → Theme's link color
• Hover color → Theme's link hover
• Current color → Muted version (often gray)
• Separator color → Muted (often matches current)

Spacing:

• Font size → Usually 12-14px
• Item spacing → 6-10px
• Padding → Match section padding in your theme

Separator:

• Slash (/) – Clean, modern
• Chevron (›) – Traditional
• Arrow (→) – Directional
• Match your theme's existing breadcrumb style if present

Step 5: Configure drilldown

1. Open theme editor → Add TreeNav Drilldown
2. Match these settings:

Pill style:

• Background → Subtle (e.g., #f3f4f6)
• Border → Light gray (e.g., #e5e7eb)
• Text → Dark (e.g., #303030)

Active state:

• Background → Theme's accent/primary
• Text → White or contrasting color
• Border → Same as background

Hover state:

• Slightly darker background
• Slightly darker border

Quick reference: Common themes

Dawn

Text: #121212
Background: transparent
Active: #121212 on #f3f3f3
Font size: 14px

Impulse

Text: #1c1c1c
Active: var(--primary-color)
Font size: 14-15px
Bolder weight

Warehouse

Text: #333333
Compact spacing
Font size: 13-14px
Minimal styling

Testing your configuration

1. Preview in editor – Check appearance
2. Test multiple pages – Collection, product, home
3. Check hover states – Interact with elements
4. Test on mobile – Verify mobile appearance
5. Compare to theme – Side by side with native elements

Fine-tuning with CSS

If block settings aren't enough, add custom CSS:

/* Bolder links */
.treenav__link {
  font-weight: 500;
}

/* Smooth hover transition */
.treenav__row {
  transition: background-color 0.15s ease;
}

/* Match theme's focus style */
.treenav__row:focus-visible {
  outline: 2px solid var(--color-focus);
}

Add to your theme's custom CSS section or code.

Troubleshooting

Colors don't match:

• Use browser's color picker to get exact values
• Check if theme uses CSS variables

Font looks different:

• TreeNav inherits font-family automatically
• Adjust font-size to match

Spacing feels off:

• Compare padding/margins with similar theme elements
• Adjust incrementally

See CSS classes for full reference.