# 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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://design-packs.gitbook.io/docs/fundamentals/sections-overview/pathfinder.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.