Shopify Breadcrumbs Not Showing: Collection Path, Theme, and Schema Fixes (2026)

Quick Fix with Thunder

Check Theme Settings and Template Placement

Many Shopify themes have a breadcrumb toggle inside product page, collection page, or global theme settings. Open the theme editor, preview a product page and collection page, and look for a setting like show breadcrumbs, navigation path, or product breadcrumbs. If the setting exists, enable it and test mobile and desktop.

If the setting does not exist, inspect the active templates. A breadcrumb snippet may be included on product pages but missing from collection pages, or included in an old template that your current products no longer use. Page builders and custom product templates commonly replace the native product section without carrying over the breadcrumb snippet.

{% unless template.name == 'index' %}
  <nav class="breadcrumbs" aria-label="Breadcrumb">
    <a href="{{ routes.root_url }}">Home</a>
    {% if collection %}
      <span aria-hidden="true">/</span>
      <a href="{{ collection.url }}">{{ collection.title | escape }}</a>
    {% endif %}
    <span aria-hidden="true">/</span>
    <span>{{ page_title | escape }}</span>
  </nav>
{% endunless %}

Keep the markup semantic and light. A breadcrumb trail does not need a JavaScript framework. If the theme uses sections, add the snippet once in the correct product and collection templates rather than duplicating it across many blocks.

Fix Breadcrumbs That Miss the Collection Path

The most common complaint is not that breadcrumbs are completely missing. It is that a product page shows Home > Product instead of Home > Collection > Product. Shopify products can belong to multiple collections, so a theme cannot always know which collection should be displayed.

If shoppers arrive from a collection page, collection-aware product links can preserve context. If you need one preferred collection for SEO or merchandising, use a product metafield or theme logic to choose the canonical breadcrumb collection deliberately. Do not randomly pick the first collection if that creates misleading paths.

{%- comment -%}Collection card link that preserves collection context{%- endcomment -%}
<a href="{{ product.url | within: collection }}">
  {{ product.title | escape }}
</a>

Test this with products in multiple collections, sale collections, automated collections, and translated storefronts. If product URLs or handles are also breaking, use the Shopify product page 404 error guide.

Check CSS, Mobile Visibility, and App Templates

Sometimes breadcrumbs are rendered but invisible. Inspect the page and search the DOM for the breadcrumb class or text. If it exists, check display, visibility, opacity, overflow, color contrast, and media queries that hide breadcrumbs on mobile.

Also test app templates. Page builders, product recommendation apps, SEO apps, and translation apps can change template output. Disable app embeds in a duplicate theme and compare the product page. If removing an app left dead snippets, follow the app leftovers cleanup checklist.

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (max-width: 749px) {
  .breadcrumbs {
    margin-bottom: 0.75rem;
  }
}

Avoid late-rendered breadcrumb bars that shift the product title down after load. If breadcrumbs move content, they can contribute to layout instability. Pair this with the Shopify CLS fix guide and large layout shifts guide.

Add Valid Breadcrumb Schema Without Duplicates

Visible breadcrumbs help shoppers. Breadcrumb schema helps search engines understand the same path. Use schema.org BreadcrumbList JSON-LD with a clear position order and matching URLs. If your SEO app already outputs breadcrumb schema, avoid duplicating it with theme code.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Dresses", "item": "https://example.com/collections/dresses" },
    { "@type": "ListItem", "position": 3, "name": "Red Linen Dress", "item": "https://example.com/products/red-linen-dress" }
  ]
}

After publishing, test the page with a rich results or schema validator. Then review internal links from collections and product cards. Breadcrumbs are only one part of crawlability; collection links, related products, and clean navigation matter too. For broader context, read the speed and SEO rankings guide and store audit checklist.

Manual Fix vs Thunder Fix

If breadcrumb cleanup is part of broader theme debt, compare Thunder pricing with professional Shopify speed optimization.

FAQ