Breadcrumbs Issue

Breadcrumbs Issue

MsMarj
Excursionist
29 0 2

I implement breadcrumbs on our site. Unfortunately the parent collection can't be included on it

Screenshot 2024-07-09 at 11.26.31 AM.png

I want to construct it like Home>>Parent Collection(Office Chairs)>>Collection(Ergonomic Chairs)>>Product page

 

Here is the code that I implemented

<style>
.breadcrumbs {
margin: 0 0 2em;
background-color: {{ settings.breadcrumb_bg_color }};
padding-top: {{ settings.padding_top }}px;
padding-bottom: {{ settings.padding_bottom }}px;
padding-left: 20px;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
display: inline-block;
content: '\00bb';
margin: 0 .6em;
color: #959fa5;
font-size: {{ settings.font_size }}px;
}

.breadcrumbs__link {
text-decoration: none;
color: {{ settings.breadcrumb_text_color }};
font-size: {{ settings.font_size }}px;
}

.breadcrumbs__link:hover {
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"] {
color: #999 !important;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: none;
}

.breadcrumbs__item:last-child:after {
content: '';
}

.disabled-breadcrumb {
color: #999 !important;
pointer-events: none !important;
text-decoration: none !important;
}
</style>

{% unless template == 'index' or template == 'cart' or template == '404' %}
{% assign t = template | split: '.' | first %}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/">Home</a>
</li>
{% case t %}
{% when 'page' %}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{% when 'product' %}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/collections">Collections</a>
</li>
{% if collection %}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>
</li>
{% endif %}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>
{% when 'collection' %}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/collections">Collections</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{% if current_tags %}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/collections/{{ collection.handle }}">{{ collection.title }}</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ collection.url }}/tagged/{{ current_tags | join: '+' }}" aria-current="page">{{ current_tags | join: ' + ' }}</a>
</li>
{% endif %}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url, class: "breadcrumbs__link" }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{ blog.url }}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: ' + ' }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url, class: "breadcrumbs__link" }}
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link disabled-breadcrumb" href="{{ request.path }}" aria-current="page">
{{- page_title -}}
</a>
</li>
{%- endcase -%}
</ol>
</nav>
{% endunless %}

 

Let me know your thoughts about this.
I can feel that there is a problem of categorising the product pages

Screenshot 2024-07-09 at 11.32.57 AM.png

Replies 3 (3)

tim
Shopify Partner
3643 317 1346

In Shopify all collections are equal, there is no parent collections or sub-collections, so it would require some extra effort.

 

For example, you may create a collection metafield which will store parent collection if one exists and then use it in your breadcrumbs.

Say it will be a "collection reference" type metafield with namespace "custom" and key "parent_collection", then will be similar to:

{% when 'product' %}
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/collections">Collections</a>
  </li>
  {% if collection %}
    {% if collection.metafields.custom.parent_collection %}
      {% assign parent = collection.metafields.custom.parent_collection %}
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="{{ parent.url }}" aria-current="page">{{ parent.title }}</a>
      </li>
    {% endif %}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>
    </li>
  {% endif %}

  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
  </li>
{% when 'collection' %}
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/collections">Collections</a>
  </li>
  {% if collection.metafields.custom.parent_collection %}
    {% assign parent = collection.metafields.custom.parent_collection %}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ parent.url }}" aria-current="page">{{ parent.title }}</a>
    </li>
  {% endif %}
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
  </li>

 

Alternatively, you may iterate over your menu link_list, find your current collection and see if there is a parent link item which links to a collection...

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Iso-Analyzify
Shopify Partner
8 2 1

Hi @MsMarj 

 

Unfortunately, Shopify’s default handling of breadcrumbs can be problematic, especially with history-based breadcrumbs and lack of support for collection hierarchies.

Here’s a quick breakdown:

  1. History-Based Breadcrumbs: Shopify’s default themes often show breadcrumbs based on user navigation history, leading to inconsistencies.
  2. Collection Hierarchy: Shopify struggles with displaying hierarchical collections correctly in breadcrumbs, which can impact internal linking and user navigation.

To address these issues, I recommend considering custom-coded solutions or third-party apps, which offer more control and flexibility over breadcrumb structure and schema implementation.

 

Feel free to reach out if you need further assistance.

 

MsMarj
Excursionist
29 0 2

Hi @Iso-Analyzify which third-party app would you recommend for implementing breadcrumbs?

Thanks