Add Shopify breadcrumbs in your Liquid template with this quick tip.
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:
- Create a
breadcrumbs.liquidfile in your theme’s snippets subdirectory. - Copy the Liquid code below and paste it in the
breadcrumbs.liquidfile. - 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">›</span>
<span>{{ page.title }}</span>
{% elsif template contains 'product' %}
{% if collection.url %}
<span aria-hidden="true">›</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
{% elsif template contains 'collection' and collection.handle %}
<span aria-hidden="true">›</span>
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
<span aria-hidden="true">›</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ collection.title }}</span>
{% endif %}
{% elsif template == 'blog' %}
<span aria-hidden="true">›</span>
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">›</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ blog.title }}</span>
{% endif %}
{% elsif template == 'article' %}
<span aria-hidden="true">›</span>
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">›</span>
<span>{{ article.title }}</span>
{% else %}
<span aria-hidden="true">›</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.
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.
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.