How to add breadcrumbs to a Shopify theme with Liquid (and the SEO schema)

Breadcrumbs are the small trail near the top of a page that shows where you are: Home / Coffee / Ethiopian Yirgacheffe. They help shoppers climb back up a category without hunting for the back button, and, done right, they give Google a clean map of your site that can show up as a breadcrumb trail in the search result itself.

This guide builds them properly in Liquid: markup that adapts to the page type, the routes object so links never break, the BreadcrumbList structured data that earns the rich result, and the accessibility attributes that most snippets skip. No app, no monthly fee.

Where breadcrumbs go

Breadcrumbs belong at the top of the main content, just under the header, on product and collection pages (and optionally pages and blog articles). You render them from a snippet so the same trail logic lives in one place. In Shopify's Horizon and other Online Store 2.0 themes, you drop the snippet into the product and collection sections.

The breadcrumb snippet

Create snippets/breadcrumbs.liquid and render it with {% render 'breadcrumbs' %} from your product and collection sections. Here is the whole thing:

1<nav class="breadcrumbs" aria-label="Breadcrumb">2  <a href="{{ routes.root_url }}">Home</a>3 4  {% if template.name == 'product' %}5    {% if product.collections.size > 0 %}6      {% assign breadcrumb_collection = product.collections.first %}7      <span aria-hidden="true">/</span>8      <a href="{{ breadcrumb_collection.url }}">{{ breadcrumb_collection.title }}</a>9    {% endif %}10    <span aria-hidden="true">/</span>11    <span aria-current="page">{{ product.title }}</span>12 13  {% elsif template.name == 'collection' %}14    <span aria-hidden="true">/</span>15    <span aria-current="page">{{ collection.title }}</span>16  {% endif %}17</nav>

How it works

• routes.root_url is Shopify's safe way to link to the homepage. Never hardcode /: the routes object keeps links correct across locales and markets, where the homepage might be /en-ca rather than /.
• template.name tells you the page type (product, collection, page...), so one snippet renders the right trail everywhere instead of guessing from the URL.
• product.collections.first picks a parent collection for the product trail. A product can belong to several collections; first is a sensible default, and below we cover choosing a smarter one.
• aria-current="page" marks the final crumb (the current page) for screen readers, and it is not a link because you are already there. MDN documents aria-current as the correct attribute for exactly this.

Add the BreadcrumbList structured data (the SEO part)

The visible trail helps shoppers. To help Google show a breadcrumb trail in the search result, you also emit BreadcrumbList structured data as JSON-LD. This is the step that turns breadcrumbs from a UX nicety into an SEO win. Add this next to the snippet above:

1<script type="application/ld+json">2{3  "@context": "https://schema.org",4  "@type": "BreadcrumbList",5  "itemListElement": [6    {7      "@type": "ListItem",8      "position": 1,9      "name": "Home",10      "item": {{ shop.url | json }}11    }12    {% if template.name == 'product' and product.collections.size > 0 %}13      {% assign breadcrumb_collection = product.collections.first %}14    ,{15      "@type": "ListItem",16      "position": 2,17      "name": {{ breadcrumb_collection.title | json }},18      "item": {{ shop.url | append: breadcrumb_collection.url | json }}19    },20    {21      "@type": "ListItem",22      "position": 3,23      "name": {{ product.title | json }}24    }25    {% elsif template.name == 'collection' %}26    ,{27      "@type": "ListItem",28      "position": 2,29      "name": {{ collection.title | json }}30    }31    {% endif %}32  ]33}34</script>

The last item intentionally omits item (the URL). Google's breadcrumb structured-data guidelines say the final breadcrumb (the current page) does not need a URL. After you ship, paste a product URL into the Rich Results Test to confirm the breadcrumb is detected.

Minimal styling

Keep it understated so it reads as navigation, not a feature. This inherits your theme's font and just handles spacing and the muted look:

1.breadcrumbs {2  display: flex;3  flex-wrap: wrap;4  align-items: center;5  gap: 0.5rem;6  font-size: 0.85rem;7  color: rgba(0, 0, 0, 0.55);8}9.breadcrumbs a {10  color: inherit;11  text-decoration: none;12}13.breadcrumbs a:hover {14  text-decoration: underline;15}16.breadcrumbs [aria-current="page"] {17  color: rgba(0, 0, 0, 0.9);18}

What AI tools get wrong here

Ask an AI assistant for Shopify breadcrumbs and the markup usually looks fine but quietly fails in production. The two recurring mistakes:

• Hardcoded URLs: linking to / or building collection URLs by hand instead of using routes.root_url and collection.url. This breaks the moment the store adds a second market or locale.
• Unescaped JSON-LD: dropping {{ product.title }} straight into the structured data without json, so any product with a quote or apostrophe ships invalid schema that Google silently ignores.

Spotting those on sight is the kind of judgment that stays valuable when AI writes the first draft. If you want to build that instinct deliberately, that is the whole point of the way we teach Shopify development.

Wrapping up

One snippet, the routes object so links survive multi-market stores, a BreadcrumbList block so Google can render the trail, and aria-current so it is accessible. That is the difference between breadcrumbs that look right and breadcrumbs that actually do their job in search and for every shopper.