Add Breadcrumb Navigation in Shopify - eCommerce Thesis

Add Breadcrumb Navigation in Shopify

Posted on by Foysal

Breadcrumbs are a secondary navigation aid that helps users easily understand the relation between their location on a page. Breadcrumbs are a useful UX feature that makes site navigation easier, but they do a lot more. Breadcrumbs help users navigate your website and they help Google categorize and navigate your website. That makes breadcrumbs kind of a big deal for SEO.

In this tutorial, I am going to

Add the following code to the top of your product-template.liquid file:

<nav aria-label="Home" class="breadcrumb">
<a class="Breadcrumbs" href="{{ routes.root_url }}">Home </a> /
<a class="Breadcrumbs" href="/collections/{{ product.type | handleize}}"> {{ product.type }} </a> /
<span class="breadcrumb__link" aria-current="page" style="font-weight:bold;"> {{ product.title}}</span>
</nav>

2nd Methoth

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

Copy the following Liquid code and paste it into the code editor for the breadcrumbs.liquid snippet:

  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:

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

Click Save to confirm your changes to theme.liquid.

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.

Leave a Reply