Breadcrumbs are one of the most important navigation elements for eCommerce stores. If you are running a Shopify store, learning how to add breadcrumbs in Shopify can make a big difference for both your users and your SEO. Breadcrumbs help customers easily understand where they are on your website and allow them to move back to previous pages quickly. At the same time, breadcrumbs help Google categorize and crawl your website more efficiently, which is great for SEO.

In this tutorial, I will show you two simple methods to add breadcrumbs in Shopify. Let’s get started.

🔹 Method 1: Add Breadcrumbs to Product Template

To quickly add breadcrumbs for products, open your product-template.liquid file and paste the following code at the top:

<nav aria-label="Home" class="breadcrumb">
  <a class="Breadcrumbs" href="{{ routes.root_url }}">Home </a> /
  <a class="Breadcrumbs" href="/collections/{{ product.type | handleize}}"> {{ product.type }} </a> /
  <span class="breadcrumb__link" aria-current="page" style="font-weight:bold;"> {{ product.title}}</span>
</nav>

This will display simple breadcrumbs starting from the homepage, then product type, and finally the product title.

🔹 Method 2: Create a Breadcrumbs Snippet

1. From your Shopify Admin, go to Online Store > Themes.
2. Select your theme and click Actions > Edit code.
3. Under the Snippets folder, click Add a new snippet.
4. Name the snippet breadcrumbs (make sure it’s lowercase).
5. Paste the following code inside breadcrumbs.liquid:

<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>
  {% if template contains 'product' %}
    {% if collection.url %}
      <span aria-hidden="true">&rsaquo;</span>
      {{ collection.title | link_to: collection.url }}
    {% endif %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ product.title }}</span>
  {% elsif template contains 'collection' and collection.handle %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ collection.title }}</span>
  {% elsif template == 'blog' %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ blog.title }}</span>
  {% elsif template == 'article' %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ article.title }}</span>
  {% endif %}
</nav>

6. Save the file, then open theme.liquid and add this line where you want breadcrumbs to appear:

{% render 'breadcrumbs' %}

Now your breadcrumbs will appear automatically on the relevant pages.

🔹 Why Add Breadcrumbs in Shopify?

• ✅ Improve user navigation and site experience.
• ✅ Help search engines understand your site structure.
• ✅ Reduce bounce rate by keeping users engaged.
• ✅ Provide quick navigation back to collections or categories.

🔹 Final Thoughts

Breadcrumbs are a small but powerful feature that can improve both user experience and SEO. By following this guide, you can easily add breadcrumbs in Shopify using either the product template method or a reusable snippet.

If you are unsure where to place the code, try adding it in different sections of your theme and preview your store until you find the perfect spot.

Watch the video: