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

    A modal in the theme editor that appears when you click Add a new snippet.

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

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

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

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