Simple Breadcrumb with Shopify Liquid

sj_admin_2024How To / Themes

Hello! Sometimes we are facing issue while creating breadcrumb on Shopify. But it is so easy. Anyone can do this. Just copy the below code and that’s all.

CSS code:

.breadcrumb {
  font-size: 14px;
  margin: 20px;
  color: #333;
}
.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span {
color: #6c757d;
}

Liquid code:

{% unless request.path == '' or request.path == '/' %}
<nav class="breadcrumb">
  <!-- Home Link -->
  <a href="{{ routes.root_url }}">Home</a>

  {% assign path_parts = request.path | split: '/' %}
  {% assign current_path = routes.root_url %}
  
  {% for part in path_parts %}
    {% if part != blank and part != 'pages' %}
      {% assign current_path = current_path | append: '/' | append: part %}
      &raquo; <a href="{{ current_path }}">{{ part | replace: '-', ' ' | capitalize }}</a>
    {% endif %}
  {% endfor %}
</nav>
{% endunless %}

Output:

Close