Shopify Breadcrumbs Generator

A breadcrumb trail for product, collection and page templates, with BreadcrumbList markup.

Your details

Text

Home label

Separator

Structured data

Add BreadcrumbList structured data

Lets Google show the trail in search results, on pages where it decides to.

Style

Link color

Current page color

Your snippet file (snippets/breadcrumbs.liquid)

{%- comment -%}
  Breadcrumb trail with BreadcrumbList structured data. Render near the top of your product,
  collection, page, blog and article templates:
  {% render 'breadcrumbs' %}
{%- endcomment -%}
{%- style -%}
  .ea-bc{font-size:.85em;margin:.75rem 0}
  .ea-bc__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
  .ea-bc__list li{display:flex;align-items:center;gap:.4rem}
  .ea-bc a{color:#666666;text-decoration:none}
  .ea-bc a:hover{text-decoration:underline}
  .ea-bc__current{color:#1a1a1a}
  .ea-bc__sep{color:#666666;opacity:.6}
{%- endstyle -%}
<nav class="ea-bc" aria-label="Breadcrumb">
  <ol class="ea-bc__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/" itemprop="item"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1">
    </li>
    {%- if template contains 'product' and product -%}
      {%- assign parent_collection = collection | default: product.collections.first -%}
      {%- if parent_collection -%}
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
          <span class="ea-bc__sep" aria-hidden="true">/</span>
          <a href="{{ parent_collection.url }}" itemprop="item"><span itemprop="name">{{ parent_collection.title | escape }}</span></a>
          <meta itemprop="position" content="2">
        </li>
      {%- endif -%}
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span class="ea-bc__sep" aria-hidden="true">/</span>
        <span class="ea-bc__current" aria-current="page" itemprop="name">{{ product.title | escape }}</span>
        <meta itemprop="position" content="{% if parent_collection %}3{% else %}2{% endif %}">
      </li>
    {%- elsif template contains 'collection' and collection -%}
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span class="ea-bc__sep" aria-hidden="true">/</span>
        <span class="ea-bc__current" aria-current="page" itemprop="name">{{ collection.title | escape }}</span>
        <meta itemprop="position" content="2">
      </li>
    {%- elsif template contains 'article' and article -%}
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span class="ea-bc__sep" aria-hidden="true">/</span>
        <a href="{{ blog.url }}" itemprop="item"><span itemprop="name">{{ blog.title | escape }}</span></a>
        <meta itemprop="position" content="2">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span class="ea-bc__sep" aria-hidden="true">/</span>
        <span class="ea-bc__current" aria-current="page" itemprop="name">{{ article.title | escape }}</span>
        <meta itemprop="position" content="3">
      </li>
    {%- elsif template contains 'blog' and blog -%}
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span class="ea-bc__sep" aria-hidden="true">/</span>
        <span class="ea-bc__current" aria-current="page" itemprop="name">{{ blog.title | escape }}</span>
        <meta itemprop="position" content="2">
      </li>
    {%- elsif page_title != blank -%}
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span class="ea-bc__sep" aria-hidden="true">/</span>
        <span class="ea-bc__current" aria-current="page" itemprop="name">{{ page_title | escape }}</span>
        <meta itemprop="position" content="2">
      </li>
    {%- endif -%}
  </ol>
</nav>

To install: in Shopify admin go to Online Store → Themes, click … next to your theme → Edit code. Under Snippets choose Add a new snippet, name it as shown above, paste this code and save. Then add {% render 'breadcrumbs' %} near the top of your product, collection, page, blog and article templates.

On a product reached directly (not through a collection link), there's no collection in context, so the trail falls back to the product's first collection, or skips that step if it's in no collection.

Structured data makes you eligible for a breadcrumb trail in Google's search result, it doesn't guarantee Google shows it. Don't add this on a page that already outputs its own BreadcrumbList, or you'll have two.

Live preview

One snippet, several template types

The trail changes based on which template it's rendered on: Home > Collection > Product on a product page, Home > Collection on a collection page, Home > Blog > Article on a blog post, and Home > Page title everywhere else.

On a product page reached directly (not through a collection listing), there's no collection object in context, so it falls back to the product's first collection, or skips that step if the product isn't in any collection.

Turn on structured data to also output matching BreadcrumbList markup (as inline itemprop attributes, which Google reads the same as a separate JSON-LD block), which makes the page eligible, not guaranteed, for a breadcrumb trail shown under your result in Google Search.

Adding it to your templates

01
Add the snippet
Online Store → Themes → Edit code → Snippets → Add a new snippet named breadcrumbs, paste the code, then add {% render 'breadcrumbs' %} near the top of your product, collection, page, blog and article templates.

Questions people ask

Will Google definitely show my breadcrumbs in search results?

Structured data makes a page eligible, it doesn't guarantee Google displays it. Treat it as a bonus, not something to rely on.

My theme already shows breadcrumbs. Should I still use this?

No, adding a second trail (or a second BreadcrumbList) on the same page is confusing for shoppers and can confuse structured data. Check your theme's product and collection templates for an existing breadcrumb snippet first.

Does it handle the home page itself?

The home page doesn't need a trail (it has nothing above it), so this snippet is meant for inner pages only.

Can I change the separator character?

Yes, enter anything short, like /, › or →, in the separator field.

Last reviewed 30 September 2026.

Sources: Schema.org: BreadcrumbList