Breadcrumbs Issue

[MsMarj]

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

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

Here is the code that I implemented

.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; }

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

1. Home
{% case t %} {% when 'page' %}
2. {{ page.title }}
{% when 'product' %}
3. Collections
{% if collection %}
4. {{ collection.title }}
{% endif %}
5. {{ product.title }}
{% when 'collection' %}
6. Collections
7. {{ collection.title }}
{% if current_tags %}
8. {{ collection.title }}
9. {{ current_tags | join: ' + ' }}
{% endif %} {%- when 'blog' -%} {%- if current_tags -%}
10. {{ blog.title | link_to: blog.url, class: "breadcrumbs__link" }}
11. {%- capture tag_url -%}{{ blog.url }}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%} {{ current_tags | join: ' + ' }}
{%- else -%}
12. {{ blog.title }}
{%- endif -%} {%- when 'article' -%}
13. {{ blog.title | link_to: blog.url, class: "breadcrumbs__link" }}
14. {{ article.title }}
{%- else -%}
15. {{- page_title -}}
{%- endcase -%}

{% endunless %}

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

[tim_1]

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' %}
  - Collections
  

  {% if collection %}
    {% if collection.metafields.custom.parent_collection %}
      {% assign parent = collection.metafields.custom.parent_collection %}
      - {{ parent.title }}
      

    {% endif %}
    - {{ collection.title }}
    

  {% endif %}

  - {{ product.title }}
  

{% when 'collection' %}
  - Collections
  

  {% if collection.metafields.custom.parent_collection %}
    {% assign parent = collection.metafields.custom.parent_collection %}
    - {{ parent.title }}
    

  {% endif %}
  - {{ collection.title }}
  

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…

[Iso-Analyzify]

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]

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

Thanks