Home > Shopify Development > Insert breadcrumb navigation to your store

How to insert breadcrumb navigation to your store in Shopify

Sam Nguyen
Sam Updated: March 20, 2024

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

Breadcrumbs, also known as breadcrumb trail, is a 2nd navigation system which can display any user’s location on website or web app. The fact is that the term itself came from a fairy tale called Hansel and Gretel, in which the 2 main characters did create a trail of breadcrumbs so that they could track back to their house. However, please keep reading our instructional writing on How to insert breadcrumb navigation to your store to know more deeply about one this topic.

How to insert breadcrumb navigation to your store

What is Breadcrumb Navigation?

To go more into details, we would like to give you more information about Breadcrumb Navigation.

To be clear, Breadcrumb Navigation is a list of links that can tell not only what page they are currently on for your customers but also all the pages that are above that page in the store’s content.

The breadcrumb navigation will look similar to this:

n

Please kindly note that you are allowed to add breadcrumb navigation to your store easily with a Liquid snippet. This snippet will produce a list of links that can display the where your users are in your website (like **Home > Categories > Cupcake).

How to insert breadcrumb navigation to your store

Step 1:

Go to Online Store > Themes from your Shopify Admin panel.

Step 2:

Choose the theme that you need to adjust and click Actions > Edit code.

How to insert breadcrumb navigation to your store in shopify

Step 3:

Generate a brand-new snippet for the breadcrumbs code:

  • Tap the Snippets folder, then tap Add a new snippet.
  • Name the snippet breadcrumbs. Be certain that the name is completely note capitalized otherwise your theme will be unable to find the new file.
  • Tap Create snippet.

How to insert breadcrumb navigation to your store in shopify

Step 4:

Copy the Liquid code given below 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 %}

Step 5:

Choose Save to get your changes confirmed and applied to breadcrumbs.liquid.

Step 6:

Tap theme.liquid to open it in the code editor.

Step 7:

Paste the code given below in theme.liquid wherever you want your breadcrumbs to be displayed:

{% include 'breadcrumbs' %}

Step 8:

Tap Save to save all of your changes to theme.liquid.

If you feel comfortable to use Liquid, you can customize the breadcrumbs’ snippet to configure what it displays or to use various separator characters for the links.

Conclusion

Let’s employ the breadcrumb navigation as a navigator for your users now!


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.