Debug mode

When to use debug mode

Enable debug mode when:

• Tree embed isn't appearing on collection pages
• Navigation appears in the wrong location
• Desktop works but mobile doesn't (or vice versa)
• You're testing custom CSS selectors

Enabling debug mode

1. Go to Online Store → Themes → Edit theme
2. Click App embeds
3. Open TreeNav Tree settings
4. Scroll to Debug section
5. Enable Show debug panel
6. Save and preview a collection page

Reading the debug panel

The debug panel appears at the bottom of the page and shows:

TreeNav Debug
─────────────────────────
Desktop: ✓ .facets-container → inside_start
Mobile:  ✗ No selector matched
─────────────────────────
Log: Trying sidebar... Found .facets-container

Status indicators

Information shown

• Desktop/Mobile status – Whether injection succeeded
• Selector – Which CSS selector matched
• Placement – Where the tree was inserted (inside_start, inside_end, before, after)
• Log – Step-by-step detection process

Common debug scenarios

Both show ✗

Problem: No selectors match your theme.

Solution:

1. Try different layout options (Sidebar → Topbar → Drawer)
2. If none work, use Custom position with a CSS selector
3. See Custom theme integration

Desktop ✓, Mobile ✗

Problem: Theme has different mobile structure.

Solution:

1. Set Mobile filters location separately
2. Try Drawer layout for mobile
3. Or use Custom position with mobile-specific selector

Wrong position

Problem: Tree appears but in wrong spot.

Solution:

1. Try different Placement option (Inside start/end, Before/After)
2. Use Custom position for precise control

Finding the right selector

If auto-detection fails:

1. Open browser DevTools (F12)
2. Inspect your theme's filter area
3. Find a unique class or ID
4. Enter it in Custom CSS selector
5. Check debug panel to verify

Testing selectors

In browser console:

document.querySelector('.your-selector')

If it returns an element, the selector works.

Debug panel details

The log shows the detection process:

Trying sidebar...
  .facets--vertical .facets__filters-wrapper - not found
  .facets-container .facets__form .facets__wrapper - not found
  #desktop-filters-form - FOUND
Injecting at inside_start

This helps identify:

• Which patterns were tried
• Why certain selectors failed
• Which selector ultimately matched

Before going live

Important: Disable debug mode before publishing!

1. Return to App embeds settings
2. Disable Show debug panel
3. Save

The debug panel is only visible to you in the theme editor preview, but it's good practice to disable it.

Next steps

• Custom theme integration for manual placement
• Add TreeNav to your theme for block setup