Without breadcrumbs, users may feel lost when browsing collections, unsure of how they got there or how to navigate back. This can lead to frustration and early exits.
Add breadcrumbs at the top of collection pages to provide a clear path (e.g., Home > Men's Clothing > Jackets). This helps users understand their location within your site's hierarchy, making it easier to explore and find products.
- Your collection pages have bounce rates above 60% or users frequently use browser back buttons instead of site navigation
- Analytics show low pages per session (under 3) with users struggling to explore related categories or subcategories
- Your store has 3+ category levels (e.g., Men's > Clothing > Jackets > Winter Jackets) making hierarchy unclear
- You're on Shopify Plus or have theme customization access - basic themes may require developer assistance
- Your store receives 1,000+ monthly collection page visits where navigation improvements will show measurable impact
Most Shopify themes include breadcrumb functionality that needs activation and customization.
- Enable breadcrumbs in theme settings: Navigate to Online Store > Themes > Customize. Look for "Product pages" or "Collection pages" settings and enable breadcrumb display.
- Position breadcrumbs correctly: Place 20-30px below your header and 15-20px above your page title. Ensure consistent placement across all collection pages.
- Style for clarity: Use 12-14px font size, neutral gray color (#666), with separators like ">" or "/" between levels. Make each level clickable except the current page.
- Add structured data: Insert this code in your collection template for SEO benefits:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
}]
}
</script>
- Mobile optimization: Ensure breadcrumbs remain visible but don't overwhelm small screens. Consider truncating middle levels on mobile with "..." notation.
- Implementation time: 2-4 hours for basic setup, additional time for custom styling.
- Bounce rate reduction: Expect 8-15% improvement on collection pages within 2-3 weeks of implementation
- Pages per session increase: Look for 12-20% improvement as users navigate more confidently through your site hierarchy
- Internal link clicks: Monitor breadcrumb click-through rates in Google Analytics - healthy stores see 5-10% of collection visitors using breadcrumbs
- Task completion rates: Track via heatmap tools like Hotjar - users should complete product finding tasks 15-25% faster with clear navigation paths
- AVOID: Making the current page clickable in breadcrumbs - this confuses users and serves no purpose
- BEST PRACTICE: Display current page in different styling (bold or different color) but without link functionality
- AVOID: Using overly long category names that break mobile layouts or create visual clutter
- BEST PRACTICE: Abbreviate long names intelligently while maintaining clarity (e.g., "Accessories" instead of "Fashion Accessories & More")
- AVOID: Inconsistent separator styles or missing separators between breadcrumb levels
- BEST PRACTICE: Use consistent ">" or "/" separators with proper spacing (5px margins) throughout your site
Get A Free Website Audit.
We’ll identify what’s leaking revenue on your site and show you how to fix it. The free audit includes: