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:

Help Center breadcrumbs

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.

Note

The breadcrumbs produced by this customization might look different depending on your theme. Test the results before you add breadcrumbs to a live store.

To add breadcrumb navigation to your store:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

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

  4. Name the snippet breadcrumbs and click Create snippet:

    Add breadcrumbs snippet
  5. 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 %}
    
    
  6. Click Save to confirm your changes to breadcrumbs.liquid.

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

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

    
    {% include 'breadcrumbs' %}
    
    

    Did you know?

    Where to place this code differs depending on your theme and where you want the breadcrumbs to appear. If you're not sure where to put it, you can try putting the code in different places and previewing your theme to see where the breadcrumbs appear.

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

Want to discuss this page?

Visit the Shopify Community