How to display collection titles in breadcrumbs on product pages?

Shopify Discussion
1

Hi,

I have a store with many collections and products - https://incensesticks.com/

So in order to provide the customer easy access to all my products, I want to display a breadcrumb on all pages ( sub-collections and product pages) .

I have added the code for that but the issue is that when I visit the product page, there is no way I can find the collection title as one product comes under many collections.

For eg: I have a collection named “Essential Oils” and there is a product named “Lemon Essential Oil” in it. SO on the product page of Lemon, I want breadcrumb as Home > Essential Oils > Lemon Oil but currently I am just getting Home > Lemon Oil.

Can anyone guide as to what can be done here to achieve the collection name?

Thanks & Regards,

Diana Hiradhar

2

Hi,

Thanks for your reply!

But I am still not quite sure about what you are saying.

I added the breadcrumb code in the product template. Below is the code:

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

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

I have added this code in the product template under liquid block.

Can you please elaborate as to what code should I add and where to get the collection name in breadcrumb.

Also, regarding the product url not containing any collection name, I am not sure why that is not coming. I have added the collection name in the product type as well as the collection field on the product page in Admin section . Plz chk the attached screenshots of my navigation and the product pages.

Kindly guide as to how this issue can be resolved.

diananh_0-1690254425484.png
diananh_0-1690254425484.png1163×592 43.3 KB

diananh_1-1690254434606.png
diananh_1-1690254434606.png1028×593 28.6 KB

Many thanks!

3

Thanks for your reply!

I was able to add the collection name in the url and this is displayed fine on the product page now.

I do have some queries though:

When I search for the product and visit the product page from there then again I do not see the collection name in breadcrumb, just the products name.

Is there a way where I can make the breadcrumb consistent for the product so no matter from where the customer lands on the product page, it will always have same breadcrumb with collection name?

Also how can I have breadcrumb throughout the website for all pages?

Thanks!

4

Hey,

I was trying this too, where should I find {{ product.url }} ?