Adding Breadcrumb Navigation to Your Shopify Store: A Step-by-Step Guide

Navigating through an online store can sometimes feel like a maze, especially for customers looking to backtrack to previously viewed products. Breadcrumb navigation is a simple yet effective way to enhance user experience by providing a clear path of navigation.

What Are Breadcrumbs?
Breadcrumbs are navigational aids that display a trail for the user to follow back to the starting or entry point. They are particularly useful for larger online stores with extensive product catalogs.

Why Use Breadcrumbs?

• Enhanced Navigation: Helps customers easily backtrack and explore your site without feeling lost.
• SEO Benefits: Improves internal linking structure, which can positively impact search engine rankings.
• User Experience: Provides a better shopping experience, reducing the likelihood of frustration and increasing the chances of a sale.

How to Implement Breadcrumb Navigation in Shopify

Note: Take a back up of your theme before you perform any code implementation or changes.

Step 1: Open the Code Editor

• Navigate to your Shopify admin panel.
• Go to Online Store > Themes.
• Select Actions > Edit code.

Step 2: Create a Breadcrumb Snippet

• In the snippets directory, create a new file named breadcrumbs.liquid.

Step 3: Add the Breadcrumb Code
Copy and paste the following Liquid code into the breadcrumbs.liquid snippet:

{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' %}
{% assign t = template | split: '.' | first %}
<div class="page-width">
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol>
    <li><a href="/" title="Home">Home</a></li>
    {% case t %}
    {% when 'page' %}
      <li><a href="{{ page.url }}" aria-current="page">{{ page.title }}</a></li>
    {% when 'product' %}
      {% if collection.url %}
        <li>{{ collection.title | link_to: collection.url }}</li>
      {% endif %}
      <li><a href="{{ product.url }}" aria-current="page">{{ product.title }}</a></li>
    {% when 'collection' and collection.handle %}
      {% if current_tags %}
        <li>{{ collection.title | link_to: collection.url }}</li>
        <li><a href="{{ collection.url }}/{{ current_tags | join: '+' }}" aria-current="page">{{ current_tags | join: ' + ' }}</a></li>
      {% else %}
        <li><a href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a></li>
      {% endif %}
    {% when 'blog' %}
      {% if current_tags %}
        <li>{{ blog.title | link_to: blog.url }}</li>
        <li><a href="{{ blog.url }}/tagged/{{ current_tags | join: '+' }}" aria-current="page">{{ current_tags | join: ' + ' }}</a></li>
      {% else %}
        <li><a href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a></li>
      {% endif %}
    {% when 'article' %}
      <li>{{ blog.title | link_to: blog.url }}</li>
      <li><a href="{{ article.url }}" aria-current="page">{{ article.title }}</a></li>
    {% else %}
      <li aria-current="page"><a href="{{ request.path }}" aria-current="page">{{ page_title }}</a></li>
    {% endcase %}
  </ol>
</nav>
</div>
{% endunless %}

Step 4: Include the Snippet in theme.liquid

• Open theme.liquid in the code editor.
• Add {% include 'breadcrumbs' %} above {{ content_for_layout }} to ensure it appears on all pages.

Step 5: Style Your Breadcrumbs with CSS
Add the following CSS to your theme’s stylesheet (e.g., theme.css.liquid or theme.css):

.breadcrumbs {
  font-size: .85em;
  margin: 0 0 2em;
}
.breadcrumbs ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: inline-block;
}
.breadcrumbs a {
  text-decoration: underline;
}
.breadcrumbs li:not(:last-child):after {  
  content: "›\00a0";
  display: inline-block;
  padding-left: .75ch;
  speak: none;
  vertical-align: middle;
}
.breadcrumbs [aria-current="page"] {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
}
.breadcrumbs [aria-current="page"]:hover,
.breadcrumbs [aria-current="page"]:focus {
  text-decoration: underline;
}

Step 6: Enable/Disable Breadcrumbs (Optional)
To give yourself the flexibility to enable or disable breadcrumbs, modify the theme.liquid file as follows:

{% if settings.show_breadcrumb_nav %}
  {% include 'breadcrumbs' %}
{% endif %}

Add the following setting to settings_schema.json:

{
  "name": "Navigation",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_breadcrumb_nav",
      "label": "Show breadcrumb navigation"
    }
  ]
}

You can now toggle breadcrumbs from your Shopify admin under Online Store > Themes > Customize > Theme Settings > Navigation.

By following these steps, you’ll enhance your Shopify store’s navigation, making it easier for customers to find their way around and improving overall user experience. If you encounter any issues or need further customization, consider reaching out to a Shopify expert.