Breadcrumbs Does Not Show The Category Path - Dawn Theme

Hi everyone,

I have finally added breadcrumbs in to my page, but they don’t show the navigation path when you go in to an actual product (Which is what I’m after)

It just shows “Home , then the product name”

Below is the screenshot when I go to a collections tab (Which is good)

BUT as soon as you go in to a product, it doesn’t show the collection any more, it just shows the “home” breadcrumb without the collection tab, please see below:

Theme: Dawn

Website: https://meeko-8476.myshopify.com

Password: Meeko

THIS IS THE CODE IN: theme.liquid

{% include 'breadcrumb' %}

THIS IS THE CODE IN breadcrumb.liquid

.breadcrumbs { margin: 0 0 2em; } .breadcrumbs__list { list-style-type: none; margin: 0;q padding: 0; } .breadcrumbs__item { display: inline-block; } .breadcrumbs__item:not(:last-child):after { border-style: solid; border-width: .10em .10em 0 0; content: ''; display: inline-block; height: .20em; margin: 0 .20em; position: relative; transform: rotate(45deg); vertical-align: middle; width: .20em; } .pd_20 { padding-top: 15px; } .breadcrumbs__link { text-decoration: underline; } .breadcrumbs__link[aria-current="page"] { color: inherit; font-weight: normal; text-decoration: none; } .breadcrumbs__link[aria-current="page"]:hover, .breadcrumbs__link[aria-current="page"]:focus { text-decoration: underline; } .breadcrumbs__link_1 { padding-left: 10px; } .breadcrumbs__item.breadcrumbs__link_n a { padding-left: 10px; }

{%- 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' -%}
  3. {{ page.title }}
  4. {%- when 'product' -%} {%- if collection.url -%}
  5. {{ collection.title | link_to: collection.url }}
  6. {%- endif -%}
  7. {{ product.title }}
  8. {%- when 'collection' and collection.handle -%} {%- if current_tags -%}
  9. {{ collection.title | link_to: collection.url }}
  10. {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%} {{ current_tags | join: " + "}}
  11. {%- else -%}
  12. {{ collection.title }}
  13. {%- endif -%} {%- when 'blog' -%} {%- if current_tags -%}
  14. {{ blog.title | link_to: blog.url }}
  15. {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%} {{ current_tags | join: " + " }}
  16. {%- else -%}
  17. {{ blog.title }}
  18. {%- endif -%} {%- when 'article' -%}
  19. {{ blog.title | link_to: blog.url }}
  20. {{ article.title }}
  21. {%- else -%}
  22. {{ page_title }}
  23. {%- endcase -%}
{%- endunless -%}

Hello @meeko

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file card-product.liquid

Step 3: replace the all anchor link attribute to below attribute-> Save

href="{{ card_product.url | within: collection }}"

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

Hi @WebDeskSolution

Thank you so much.

Sorry, which lines do I replace with href=“{{ card_product.url | within: collection }}”

Hi @WebDeskSolution

I just changed them all now it works!!!

THANK YOU so much.

Appreciate your help :slightly_smiling_face:

1 Like

Hello @meeko

If your URL contains collection then the collection will be shown in the breadcrumbs otherwise it will not show.

1 Like

Hi @WebDeskSolution

When I go in to a product. It doesn’t show the collection it’s in, it just shows the name of the item (See below)

Also if I view the product off the home page it doesn’t show the collection it’s in.

Compared to if I go through “For Her - Self-care - Then the product” It will show the collection it’s in.

If you can see the breadcrumb link difference between the top screenshot and the below one.

Hello @meeko

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file card-product.liquid

Step 3: replace the All anchor link attribute to below attribute-> Save

href="{{ card_product.url | within: collection }}"

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

Hello, it works perfect but on the home page I get a blank space, how can I remove it? thank you

Hi there,

I am trying to solve a similar issue, all our products only show “All Products” in the breadcrumb. I have looked in code and can’t find card-product.liquid can you help?

https://www.alternative-footwear.co.uk/products/pleaser-adore-1020gp

my website https://lukkydeals.com also has the same problem, breadcrumbs do not show the entire path of the product. All the products are in different collections. How do show the full path of the product in the breadcrumbs.

Thanks for the help

Sree

Same issue here. New to shopify and trying to add breadcrumbs but not showing collection. I’m lost on Step 3: replace all anchors. Should I find every where that says card_product.url and change it to href="{{ card_product.url | within: collection }} or where specifically??