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:

1. Create a new snippet for the breadcrumbs code:

   1. Click the Snippets folder, then click Add a new snippet.
   2. Name the snippet breadcrumbs. Make sure that the name is not capitalized, or your theme won't be able to find the new file.
   3. Click Create snippet:

   

2. Copy the following Liquid code and paste it into the code editor for the breadcrumbs.liquid snippet:

   Copy

   {% 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 %}

3. Click Save to confirm your changes to breadcrumbs.liquid.

4. Click theme.liquid to open it in the code editor.

5. Paste the following code in theme.liquid wherever you want your breadcrumbs to appear:

   Copy

   {% render 'breadcrumbs' %}

6. 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.