Shopify Breadcrumbs in your Liquid Template

Adding breadcrumbs to your Shopify templates is a cinch! Use this quick tip to create customizable breadcrumbs on your Shopify site.
Shared by
Published
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Find your next web developer job
jobs by Indeed

Add Shopify breadcrumbs in your Liquid template with this quick tip.

Shopify Breadcrumbs
Example of what Shopify breadcrumbs could look like.

Adding a breadcrumb navigation to you site will let customers know where they are in your store. You can add breadcrumb navigation to your store with a Liquid snippet. This snippet will produce a list of links that show where your customer is in your store, such as Home › Collection › Product.

Here’s the easiest way to add customizable Shopify breadcrumbs in your Liquid templates:

  1. Create a breadcrumbs.liquid file in your theme’s snippets subdirectoy.
  2. Copy the Liquid code below and paste it in the breadcrumbs.liquid file.
  3. Include the snippet in your template code as needed: {% include 'breadcrumbs' %}
{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>
  {% if template contains 'page' %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>
  {% elsif 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>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}
  {% elsif template == 'blog' %}
    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ blog.title }}</span>
    {% endif %}
  {% 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>
  {% else %}
   <span aria-hidden="true">&rsaquo;</span>
   <span>{{ page_title }}</span>
  {% endif %}
</nav>
{% endunless %}

If you’re comfortable using Liquid, you can edit the breadcrumbs snippet to customize what it shows or to use different separator characters for the links. Every theme is different so feel free to edit the code as needed for your particular theme.

Did you find Shopify Breadcrumbs in your Liquid Template useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
Posted on Aug 6, 2020 at 5:49pm
Campus, IL
Posted on Jul 29, 2020 at 9:44pm
Dulles, VA
jobs by Indeed
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.

1 Comment on “Shopify Breadcrumbs in your Liquid Template”

# Jun 3, 2020

Hello, I do as your article shows, including creating a breadcrumb. liquid file in my theme’s snippets, and then copying the Liquid code below and paste it in the breadcrumbs.a liquid file without any extra code.
I don’t know how to add extra template code, and I just paste the code you list on a newly-created liquid file. But it doesn’t work.

So I need your further help.

Looking forward to you.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

All comments posted on 'Shopify Breadcrumbs in your Liquid Template' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.