> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/pathfinder.md). # 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 {% embed url="" %} #### How It Works (User Experience) 1. **Customer views Layer 1** with available options (e.g., "Shop By Gender") 2. **Customer selects an option** (e.g., "Women") 3. **Layer 2 appears** with next set of choices (e.g., "Choose Category") 4. **A CTA button appears** after Layer 1, linking to products matching the first selection 5. **Customer continues** through remaining layers, with CTAs updating at each step 6. **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: 1. Displays selection options across 3 layers 2. Tracks which option is selected in each layer 3. Builds a URL based on those selections 4. 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**](https://design-packs.gitbook.io/docs/fundamentals/section-settings/pathfinder-url-strategy-guide) for detailed instructions on: * Collection Handle strategy * Search Query strategy * Tagged Collection strategy * Custom Pattern strategy #### Basic Setup Steps 1. **Add the section** to your page 2. **Configure appearance** (colors, fonts, spacing) 3. **Choose URL strategy** in section settings 4. **Add Layer blocks** (1-3 layers) 5. **Add Option blocks** within each layer (set option IDs and titles) 6. **Set CTA text** for each layer 7. **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](https://design-packs.gitbook.io/docs/fundamentals/section-settings/pathfinder-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](https://design-packs.gitbook.io/docs/fundamentals/section-settings/pathfinder-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**](https://design-packs.gitbook.io/docs/fundamentals/section-settings/pathfinder-url-strategy-guide) - Detailed guide on configuring URL generation *** ### Support For technical support or questions about this section, contact Design Packs support at