Add breadcrumb navigation
Breadcrumb navigation is a list of links that show a customer what page they are on, and all the pages that are "above" that page in a store's content.
The breadcrumb navigation for this page looks like this:

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.
To add breadcrumb navigation to your store:
Create a new snippet for the breadcrumbs code:
- Click the Snippets folder, then click Add a new snippet.
- Name the snippet
breadcrumbs
. Make sure that the name is not capitalized, or your theme won't be able to find the new file. - Click Create snippet:
Copy the following Liquid code and paste it into the code editor for the
breadcrumbs.liquid
snippet:{% 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 %}
Click Save to confirm your changes to
breadcrumbs.liquid
.Click
theme.liquid
to open it in the code editor.Paste the following code in
theme.liquid
wherever you want your breadcrumbs to appear:{% render 'breadcrumbs' %}
Click Save to confirm your changes to
theme.liquid
.
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.