Breadcrumbs Menu in Shopify

Adding Breadcumbs Menu in Shopify

Adding a Breadcrumbs Menu is probably a common task when working on a Shopify theme to extend features. Today, I’ll share how to add a breadcrumbs menu with ease and avoid unnecessary complexity. I’m jumping into the code directly:

<nav aria-label="breadcrumb">
  <ul class="breadcrumb">
    <li><a href="{{ routes.root_url }}">Home</a></li>

    {% if template == 'page' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li>{{ page.title }}</li>

    {% elsif template == 'product' %}
      {% assign product_collection = product.collections | first %}
      {% if product_collection %}
        {% render 'icon', icon: 'chevron-right' %}
        <li><a href="{{ product_collection.url }}">{{ product_collection.title }}</a></li>
      {% endif %}
      {% render 'icon', icon: 'chevron-right' %}
      <li>{{ product.title }}</li>

    {% elsif template == 'collection' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li>{{ collection.title }}</li>

    {% elsif template == 'blog' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li><a href="{{ blog.url }}">{{ blog.title }}</a></li>

    {% elsif template == 'article' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li><a href="{{ blog.url }}">{{ blog.title }}</a></li>
      {% render 'icon', icon: 'chevron-right' %}
      <li>{{ article.title }}</li>

    {% elsif template == 'search' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li>Search</li>

    {% elsif template contains 'cart' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li>Shopping Cart</li>

    {% elsif template contains 'checkout' %}
      {% render 'icon', icon: 'chevron-right' %}
      <li>Checkout</li>

    {% endif %}
  </ul>
</nav>

The above code is very generic and shows how to retrieve related URLs based on the template and how to structure the component, maintaining semantic HTML markup. Although the code is straightforward and makes sense, let me explain.

The template is to detect which template you are on. So it can be a product, collection, search, blog, etc template. And based on the template, we’re creating a URL. We can add a ‘Home’ icon instead of the text for the home URL. I had an icon snippet file that included all the necessary icons in SVG, and I used that.

Add the above code as a Shopify snippet (under the snippets folder, file name ‘breadcrumbs.liquid’) and render {%- render 'breadcrumbs' -%} it in a section. For example, if you want to apply only on the product page, you can add it in main-product.liquid above the product image maybe. If you want to apply it across the site, you can add it to a more common template, like in the header.liquid.

To style the breadcrumb menu, the CSS will help.

ul.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
}

The above CSS will fit the Breadcrumb menu into a single line and even break into multiple lines in case the menu is too long than the screen size, like on mobile.

To enhance the user experience and give the option to enable/disable breadcrumbs from the theme customizer, we can add schema in section settings as below.

{
      "type": "checkbox",
      "id": "breadcrumbs",
      "label": "Enable Breadcrumbs",
      "default": true
},

This will add a toggle option in section settings. So, you go to customizer > product template, you should see the option to toggle the “Breadcrumbs.” However, in this case, the rendering of breadcrumbs.liquid should be wrapped in a conditional block.

{%- if section.settings.breadcrumbs -%}
   {%- render 'breadcrumbs' -%}
{%- endif -%}

Do share if you like this tutorial, and let me know your feedback in the comment box below.

For any assistance on Shopify development and customization, here is my Fiverr gig.