Create a breadcrumb trail for free with the [Shopify] API

Hello this is EC Penguin!

This time we will show how to make "breadcrumb" in Shopify, which is considered quite important in SEO as well. By researching about breadcrumbs, I've found some apps but it was not free and kind of complicated to use.

And that's why we are going to make breadcrumbs by coding which is free.

I suppose that you already know about breadcrumbs since you managed to come to this article, so I'll skip the explanation about it.

It might be known as breadcrumb navigation, when it comes to the official name.

Lets proceed to the actual steps to make breadcrumb navigation then.

STEP1. Make snippets for breadcrumbs navigation

First we need to make snippet, and lets name it as breadcrumb.liquid.

From Shopify admin,

Theme→Actions→Edit code→ move to snippet folder→Add a new snippet→make the name as "breadcrumbs"

[Link]Official Shopify API

Now we have succeeded to make snippet. If you are using your own editor like Atom and connecting to Shopify, you can just create breadcrumbs.liquid inside snippets folder.

STEP2. Edit breadcrumbs.liquid file

So moving on to the content that we should put inside breadcrumbs navigation.

You can just copy and paste the code.

  {% unless template == 'index' or template == 'cart' or template == 'list-collections' %} <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs"> <a href="/en" 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 %}  

Just for your information, above code will show different breadcrumbs navigation on each page, product, collection, blog, article pages. Thus, it's not really necessary to edit for each pages in your store.

STEP3. Embed the snippet code

If you have managed to come this far, last step is pretty easy.

Copy and paste below code to the place you want to show.

  {% render 'breadcrumbs' %}  

For example, if you want to show breadcrumb navigation to product page, you can include the snippet code in product-template.liquid. (The file name may differ to the theme you are using.)

And when I was researching, I've found that quite a lot of things can be done by using Shopify API.

Shopify API source that I used are below.
https://shopify.dev/tutorials/customize-theme-add-breadcrumbs