How to create Breadcrumb Navigation for your Shopify store?

how-to-create-breadcrumb-navigation-to-your-shopify-store

Breadcrumb Navigation is secondary navigation, also known as breadcrumbs. It can reduce the number of actions. Breadcrumbs appear across the top of a Web page, below the title bars or headers. They provide links back to each previous page the user navigated through to get to the current page. You can add breadcrumb navigation to your store with a Liquid snippet. This snippet produces a list of links that can display where the users are on your website.i

Here’s the easiest way to add customizable breadcrumbs in your Liquid templates:

expoundsofttechsolutionhow-to-create-breadcrumb-navigation-to-your-shopify-store

p
how-to-create-breadcrumb-navigation-to-your-shopify-store

1. Log in to your Shopify admin and go to Online Store > Themes.

2. Choose the theme and click on the Actions > Edit code.

3. Click on the Snippets folder, then click on Add a new snippet.

4. Name your snippet "breadcrumbs.liquid" and click on Create snippet button.expoundsofttechsolutionhow-to-create-breadcrumb-navigation-to-your-shopify-storehow-to-create-breadcrumb-navigation-to-your-shopify-store

5. Copy the below Liquid code and paste it in your breadcrumbs.liquid file.

{% 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. Include the snippet in your theme.liquid file wherever you want your breadcrumbs to be displayed: {% include 'breadcrumbs' %}

how-to-create-breadcrumb-navigation-to-your-shopify-store