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

To add breadcrumb navigation to your store:

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Click the Snippets folder, then click Add a new snippet.

    Snippets are chunks of code that you can re-use in multiple places in your theme.

  3. Name the snippet breadcrumbs and click Create snippet:

  4. 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">&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 %}
  5. Click Save to confirm your changes to breadcrumbs.liquid.

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

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

    {% include 'breadcrumbs' %}
  8. 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.

Ready to start selling with Shopify?

Try it free