How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code

How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code

A Breadcrub navigation is a 2nd navigation system which displays site user’s location on a website of app. Popularly known as Breadcrumbs, Breadcrumb navigation reduces the number of actions needed by visitors to navigate to a higher page level improving the website’s sections and pages' discoverability. 

Using linklist object, 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.

How to Add Breadcrumb Navigation to Your Shopify Store

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. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. 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:
  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 %} 

  1. Click Save to confirm your changes to breadcrumbs.liquid.
  2. Click theme.liquid to open it in the code editor.
  3. Paste the following code in theme.liquid wherever you want your breadcrumbs to appear:

    4.  {% 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.

     

    Inserting a breadcrumb navigation into your Shopify store is relatively easy once you follow this step-by-step guide. You don’t need an app to do this, just follow our guide.

    Back to blog