Overview

The Categories Tree page is split into two main sections, with a powerful build from menu feature to help you get started quickly:

🌳 Tree View (Left Panel)

Purpose: This hierarchy defines the breadcrumbs and sub-categories blocks displayed on your storefront. Collections in the tree view will:

• ✅ Appear in breadcrumb navigation paths

• ✅ Show as subcategories on collection pages

• ✅ Create multi-level navigation structures

• ✅ Be included in structured data (SEO)

📦 Unassigned Categories (Right Panel)

Purpose: Hidden breadcrumb & subcategories - collections that exist in your store but are NOT part of the navigation structure. Collections in unassigned categories will:

• ❌ Not appear in breadcrumbs

• ❌ Not show as subcategories blocks

• ❌ Not be included in navigation hierarchy

• ✅ Still be accessible via direct URLs

Tree view - main features

🔍 Search

Location: Search box at the top of tree view Functionality:

• Quickly find categories by name

• Filters the tree in real-time

• Helps navigate large category structures

🔄 Refresh button

Location: Top right corner Purpose: Fetches the latest published collections from your Shopify store and syncs menus When to use:

• After adding new collections in Shopify admin

• To sync recent changes from your store

• Before making major reorganization

• When you don't see your menus in the dropdown

🎯 Build from Menu

Location: Button group next to Tree view heading Purpose: Automatically build your category tree based on your existing Shopify navigation menu structure

How it works

• Select a menu from the dropdown (Main menu, Footer menu, etc.)

• Click "Build from menu" button

• The app automatically:

• - Imports all published collections from the menu

• - Preserves the menu hierarchy (parent → child relationships)

• - Supports multi-level nesting (3+ levels)

• - Moves unused collections to "Unassigned" panel

What gets imported:

• ✅ Published collections only - Only menu items linking to published collections

• ✅ Menu hierarchy - Parent → child relationships are preserved

• ✅ Multi-level nesting - Supports deep menu structures (3+ levels)

What's excluded:

• ❌ Draft/unpublished collections - Only published collections are imported

• ❌ HTTP links - External links and custom URLs are skipped

• ❌ Product links - Direct product links are not imported

• ❌ Page links - Links to pages are excluded

• ❌ Other menu items - Blogs, search, cart links, etc. are not imported

Important limitations:

• ⚠️ Only published collections - Draft or unpublished collections won't be imported

• ⚠️ Menu links only - Only collections that are in your menu will be imported

• ⚠️ Starting point only - You'll likely need to customize after building (add more collections, reorganize, etc.)

Menu caching

Menus are cached for 24 hours for faster loading. The cache timestamp is shown next to the button group (e.g., "Cached 14:30:25").

Need to sync menus?

If you don't see your menus in the dropdown, click the Refresh button to sync the latest menus from your Shopify store.

Visual indicators in menu dropdown

• Collection items - Normal color, can be synced to your tree

• Non-collection items (HTTP links, etc.) - Lighter gray color with type badge (e.g., "HTTP")

• Default menu - Green "Default" badge

⬇️ Collapse all button

Location: Next to search box Purpose: Collapses all expanded categories to show only top-level items Use case:

• Get an overview of your main categories

• Quickly navigate a complex tree

• Before making structural changes

⬆️ Expand all button

Location: Next to collapse all Purpose: Expands all categories to show the full hierarchy Use case:

• See the complete category structure

• Find deeply nested items

• Review the entire navigation at once

Drag & drop operations

The tree supports powerful drag & drop functionality for organizing categories.

Multi-select

How to select multiple items:

• Select first item: Click on a category

• Add more items: - Hold ⌘/Ctrl + Click = Add individual items - Hold Shift + Click = Select range of items

• Drag together: Drag any selected item, all selected items move together

Moving categories

Single item:

• Click and hold a category

• Drag to new position

• Drop to place: - Between items = Same level (sibling) - Onto an item = Child of that item (nest) - Drag left while nested = Un-nest (move up a level)

Multiple items:

• Select multiple categories (⌘/Ctrl + Click)

• Drag any selected item

• All selected items move together

• Drop to place them as a group

Visual feedback

• Drag indicator line shows where items will be placed

• Hover highlight on target parent category

• Indent level shows nesting depth

Unassigned categories panel

Purpose & behavior

Collections in this panel are hidden from:

• Breadcrumb navigation

• Subcategories blocks

• Category hierarchy

• Structured data

Why keep collections unassigned?

• Internal/admin-only collections

• Seasonal collections not currently active

• Test collections

• Collections used for other purposes (discounts, bundles, etc.)

Adding to tree view

Method 1: When a category is selected in tree

• Click to select a category in the tree view (left panel)

• Check one or more collections in Unassigned panel

• Click Add or drag the collection

• → Collection becomes a child of the selected category

Method 2: When no category is selected

• Ensure nothing is selected in tree view

• Check one or more collections in Unassigned panel

• Click Add or drag the collection

• → Collection is added at the bottom of the tree (root level)

Search unassigned

Location: Search box at the top of Unassigned panel Functionality:

• Filter the list of unassigned collections

• Find specific collections quickly

• Shows count: "Showing 27 unassigned collections"

Refresh unassigned

Icon: Refresh icon next to search Purpose: Updates the list of unassigned collections from Shopify

Keyboard shortcuts

• ⌘/Ctrl + Click = Multi-select categories

• Shift + Click = Select range of categories

• Drag = Move category/categories

• Click collapse icon = Toggle category children

• Hold ⌘/Ctrl + Click collapse = Collapse all children recursively

Saving changes

Auto-save: Changes are NOT saved automatically Manual save:

• Click "Save" button at bottom right

• All changes are applied together

• Refresh your storefront to see updates

Custom Collection Display Names

You can set a custom display name for any collection used in your tree. This lets you show a cleaner, shorter, or more customer-friendly label in your breadcrumbs and subcategories without renaming the actual Shopify collection.

• ✅ Keep the original Shopify collection title for internal/admin usage

• ✅ Show a different label on storefront navigation (breadcrumbs + subcategories)

• ✅ Useful for SEO-friendly wording, abbreviations, or consistent naming

How to edit display names

In Categories Tree, click on a collection and edit its Display Name inline. Notes:

• Changes are saved when you click Save (same as tree structure changes)

• Leaving the Display Name empty removes the custom name (fallback to the collection title)

• Recommended: keep it short (e.g., 20-40 characters) for better mobile UX

How it appears on storefront

When a display name exists, the storefront UI prefers it over the original title. If no display name is set, the app falls back to the Shopify collection title. This affects:

• Breadcrumb labels for collection levels

• Subcategories block titles/links (when enabled in your theme)

Category structure examples

Build from Menu example

Before building: Your Shopify Main Menu:

Main Menu
├─ Women (COLLECTION)
│  ├─ Dresses (COLLECTION)
│  │  ├─ Summer Dresses (COLLECTION)
│  │  └─ Evening Dresses (COLLECTION)
│  └─ Tops (COLLECTION)
├─ Men (COLLECTION)
│  ├─ Shirts (COLLECTION)
│  └─ Pants (COLLECTION)
├─ About Us (HTTP) ← Skipped
└─ Contact (HTTP) ← Skipped

After clicking "Build from menu": Your Categories Tree:

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
  └─ 👕 Tops

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants

Result:

• All collection items imported with hierarchy preserved

• HTTP links (About Us, Contact) automatically skipped

• Ready to customize further with drag & drop

Fashion store example

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
      └─ 👔 Casual Dresses
  └─ 👕 Tops
  └─ 👖 Bottoms

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants
  └─ 🧥 Outerwear

📁 Sale
  └─ 50% Off
  └─ Clearance

Electronics store example

📁 Computers
  └─ 💻 Laptops
      └─ Gaming Laptops
      └─ Business Laptops
  └─ 🖥️ Desktops
  └─ ⌨️ Accessories

📁 Smartphones
  └─ 📱 iPhone
  └─ 📱 Samsung
  └─ 📱 Google Pixel

Best practices

Start with Build from Menu

Recommended workflow:

• Use Build from menu first - If you already have a navigation menu, use Build from Menu to get started quickly

• Review the structure - Check if the imported hierarchy makes sense

• Customize as needed - Add missing collections, reorganize, or adjust depth

• Save and test - Save your changes and check breadcrumbs on your storefront

Benefits:

• Saves time compared to manual setup

• Preserves your existing menu structure

• Provides a solid starting point for customization

Keep it simple

Good structure:

• 2-3 levels deep maximum

• 5-7 categories per level

• Clear, descriptive names

Bad structure:

• Too many nested levels (confusing)

• Too many categories at once (overwhelming)

• Vague names like "Other" or "Misc"

Organize by customer thinking

Think like your customers:

• How do they search for products?

• What's their mental model?

• What's most important to them?

Fashion example: ✅ By gender first (Women > Dresses) ❌ By color first (Red > Women's Items) Electronics example: ✅ By device type (Laptops > Gaming) ❌ By brand first (Apple > All Products)

Use consistent naming

Do:

• Women's Dresses

• Men's Shirts

• Kids' Shoes

Don't:

• Dresses for Women

• Shirts (Men)

• Children Footwear

Balance breadth vs depth

Breadth (Flat): Good for small catalogs

📁 Dresses
📁 Tops
📁 Pants
📁 Accessories

Depth (Nested): Good for large catalogs

📁 Women
  └─ Dresses
  └─ Tops
  └─ Pants

Common mistakes to avoid

❌ Too deep hierarchies

Bad:

Home › Fashion › Women › Clothing › Dresses › Casual › Summer › Floral

Good:

Home › Women › Dresses › Summer Dresses

❌ Inconsistent naming

Bad:

• Women's Dresses

• Tops for Women

• Female Accessories

• Women Shoes

Good:

• Women's Dresses

• Women's Tops

• Women's Accessories

• Women's Shoes

❌ Overlapping categories

Bad:

📁 Sale Items
📁 Clearance
📁 Discounted Products

Good:

📁 Sale
  └─ 50% Off
  └─ Clearance

Tips for different store sizes

Small stores (< 100 products)

Keep it flat and simple:

📁 New Arrivals
📁 Dresses
📁 Tops
📁 Accessories
📁 Sale

Medium stores (100-1000 products)

Add one level of depth:

📁 Women
  └─ Dresses
  └─ Tops
📁 Men
  └─ Shirts
  └─ Pants
📁 Sale

Large stores (1000+ products)

Use full hierarchies:

📁 Women
  └─ Clothing
      └─ Dresses
      └─ Tops
  └─ Accessories
📁 Men
  └─ Clothing
  └─ Accessories

Common questions