How to Add Breadcrumbs to Your Shopify Plus Store Natively

Out of the box, Shopify Plus doesn’t include a native breadcrumb system, even at the $2,000+ per month tier. But the good news is: you can add breadcrumbs cleanly using Liquid, without needing apps or bloated themes.

This guide shows you how to implement lightweight, theme-native breadcrumbs that dynamically reflect your store structure.

What’s Missing

• Shopify doesn’t generate breadcrumb trails automatically
• There is no global setting or toggle for enabling breadcrumbs
• Breadcrumbs can be manually coded using Liquid and theme routes

Step-by-Step: Add Native Breadcrumbs with Liquid

In your Shopify theme:

1. Go to Online Store → Themes → Edit Code
2. Under Snippets, click Add a new snippet
3. Name it: breadcrumbs.liquid
4. Paste this code:

<nav aria-label="breadcrumb" class="breadcrumb">
  <ol>
    <li><a href="{{ routes.root_url }}">Home</a></li>

    {% if collection %}
      <li>
        <a href="{{ collection.url }}">{{ collection.title }}</a>
      </li>
    {% endif %}

    {% if product %}
      <li aria-current="page">{{ product.title }}</li>
    {% elsif article %}
      <li>
        <a href="{{ blog.url }}">{{ blog.title }}</a>
      </li>
      <li aria-current="page">{{ article.title }}</li>
    {% elsif page %}
      <li aria-current="page">{{ page.title }}</li>
    {% endif %}
  </ol>
</nav>

Add this CSS to your theme’s stylesheet or inside the same snippet:

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: 0.9rem;
}
.breadcrumb li::after {
  content: "/";
  margin-left: 0.5em;
}
.breadcrumb li:last-child::after {
  content: "";
}

Now place this line where you want the breadcrumbs to show:

{% render 'breadcrumbs' %}

Common placements:

• Inside product.liquid or main-product.liquid
• Inside collection.liquid or main-collection.liquid
• Inside blog article templates

Optional: Add Category Logic

If you built a custom category system using metaobjects (as explained in Article 1), you can extend breadcrumbs like this:

{% assign cat = collection.metafields.custom.category %}
{% if cat.parent %}
  <li><a href="{{ cat.parent.url }}">{{ cat.parent.title }}</a></li>
{% endif %}
<li><a href="{{ collection.url }}">{{ collection.title }}</a></li>

Pros of This Approach

• 100% native, no app needed
• Minimal code, very lightweight
• Fully customisable for SEO, UX or mobile
• Compatible with any Online Store 2.0 theme

Final Thoughts

Breadcrumbs help both users and search engines understand your store’s structure. Even though Shopify doesn’t include them by default, it’s easy to add your own with just one snippet.