Pathfinder
The Pathfinder section is an interactive product discovery tool that guides customers through a multi-step selection process to find products that match their preferences.
What It Does
Interactive Guided Navigation
The Pathfinder section creates a step-by-step experience where customers make selections across up to 3 layers to narrow down their product choices.
Key Features:
Progressive Disclosure: Each layer reveals itself only after the previous selection is made
Visual Feedback: Selected options are highlighted with animations and visual states
Dynamic Button Text: Call-to-action buttons update to reflect current selections
Multiple Display Styles: Options can display as icons, color swatches, or text-based cards
Flexible URL Generation: Multiple strategies for creating destination links based on selections
How It Works (User Experience)
Customer views Layer 1 with available options (e.g., "Shop By Gender")
Customer selects an option (e.g., "Women")
Layer 2 appears with next set of choices (e.g., "Choose Category")
A CTA button appears after Layer 1, linking to products matching the first selection
Customer continues through remaining layers, with CTAs updating at each step
Final CTA button directs to products matching all selections
What You Can Build
Product Finders:
Gender → Category → Color
Room → Furniture Type → Style
Skin Type → Concern → Product Type
Experience Level → Activity → Equipment Type
Service Selectors:
Budget → Service Type → Timeline
Industry → Business Size → Solution Type
Custom Quizzes:
Preference-based product recommendations
Style matching tools
Need-based navigation
What It Doesn't Do
Not a Smart Recommendation Engine
No AI/ML: Doesn't learn from customer behavior or provide personalized recommendations
No Logic Rules: Can't hide/show options based on previous selections (all options in a layer are always visible)
No Conditional Paths: Layer 2 and 3 options are the same regardless of Layer 1 selection
Not a Product Filter
No Real-Time Filtering: Doesn't dynamically update product counts or availability
No Inventory Integration: Doesn't check if products exist for selected combinations
No Multi-Select: Customers can only select one option per layer
Not a Form
No Data Collection: Doesn't capture or store customer selections
No Email Submission: Can't send results to customers or merchants
No CRM Integration: Selections are not saved to customer profiles
Not a Cart Tool
No Add to Cart: Doesn't directly add products to cart
No Product Display: Doesn't show actual products in the section
How It Actually Works (Technical)
The Pathfinder section is a navigation tool that:
Displays selection options across 3 layers
Tracks which option is selected in each layer
Builds a URL based on those selections
Directs customers to that URL when they click the CTA button
The destination page (collection, search, or custom page) is where customers actually see products and can add to cart.
When to Use Pathfinder
✅ Good Use Cases
You have a clear hierarchy of attributes:
Gender → Category → Color works perfectly
Room → Furniture → Style makes sense
Your products fit into distinct categories
You want to simplify complex catalogs:
Large inventory that overwhelms customers
Multiple product lines that need organization
Cross-selling opportunities across categories
You have existing collections or tags:
Collections are already organized by these attributes
Products are tagged consistently
URLs are predictable and structured
You want an engaging homepage element:
Interactive alternative to static collection links
Visual interest with animations and hover states
Modern, app-like user experience
❌ Not Ideal For
You need true personalization:
Use a dedicated quiz/recommendation app instead
Pathfinder shows the same options to everyone
You need complex logic:
If Layer 2 options should change based on Layer 1, this won't work
You need data collection:
Can't capture emails or save preferences
Use a form builder or quiz app with backend integration
Products don't fit clear categories:
Works best with hierarchical product structures
Overlapping categories will create confusion
Setup Requirements
Before You Start
1. Plan Your Structure:
Decide on 1-3 layers (Gender → Category → Color)
List all options for each layer
Ensure options are mutually exclusive within a layer
2. Prepare Your Collections/Tags:
Create collections for each combination, OR
Tag products consistently, OR
Set up search-friendly product titles, OR
Plan custom URL patterns
3. Choose Your URL Strategy: See the URL Strategy Guide for detailed instructions on:
Collection Handle strategy
Search Query strategy
Tagged Collection strategy
Custom Pattern strategy
Basic Setup Steps
Add the section to your page
Configure appearance (colors, fonts, spacing)
Choose URL strategy in section settings
Add Layer blocks (1-3 layers)
Add Option blocks within each layer (set option IDs and titles)
Set CTA text for each layer
Test URLs to verify they work
Customization Options
Visual Styling
Colors (background, text, accents, buttons, cards)
Fonts (heading and body fonts)
Spacing (padding, margins)
Border radius (rounded corners on cards and buttons)
Text size scaling
Layout Options
Section width and max-width
Card grid columns (min card width determines responsive behavior)
Card aspect ratio options
Display Styles (Per Option)
Icon: Show SVG icon with title and optional description
Color Swatch: Show color circle with title
Image: Show custom image with title
Content Options
Section heading and subheading
Layer titles (e.g., "Step 1: Choose Gender")
Layer CTA text (e.g., "Shop All Women's")
Option titles and descriptions
Custom icons or colors per option
Best Practices
Content Strategy
Keep it simple:
1-3 layers is ideal (more creates decision fatigue)
4-8 options per layer works best
Clear, concise option titles
Make it visual:
Use icons for abstract concepts (gender, category)
Use color swatches for color choices
Use images for style/aesthetic choices
Test your URLs:
Verify every possible combination leads somewhere
Check that collections exist or search returns results
Ensure final pages are relevant to selections
Design Tips
Maintain hierarchy:
Layer 1 should be the broadest category
Each layer should meaningfully narrow choices
Final destination should match all selections
Use descriptive CTAs:
"Shop All Women's Tops" is better than "Continue"
Let customers know what they'll see next
Dynamic text updates are handled automatically
Consider mobile:
Cards stack nicely on smaller screens
Keep titles short (2-3 words ideal)
Test tap targets are large enough
Troubleshooting
Buttons Don't Link Anywhere
Check that Option IDs are set for all options
Verify URL strategy settings are configured
See URL Strategy Guide for help
Layers Don't Appear
Each layer needs at least one option block
Options need titles to display
Check that layer visibility isn't affected by custom CSS
URLs Lead to 404 Pages
Verify collections exist with exact handles
Check tag spelling and product tagging
Test URLs manually in browser
See URL Strategy Guide for troubleshooting
Styling Issues
Check theme font settings vs override settings
Verify color contrast (text on backgrounds)
Test on mobile and desktop
Check custom CSS for conflicts
Technical Notes
Performance
Lightweight (no external dependencies)
Uses native CSS animations
Web component for progressive enhancement
No API calls or external requests
Accessibility
Keyboard navigation supported (Enter/Space to select)
Focus states on interactive elements
Semantic HTML structure
Color is not the only visual indicator
Browser Support
Modern browsers (Chrome, Firefox, Safari, Edge)
Uses custom elements (Web Components)
Graceful degradation for older browsers
Related Resources
URL Strategy Guide - Detailed guide on configuring URL generation
Support
For technical support or questions about this section, contact Design Packs support at info@design-packs.com
Last updated