BreadCrumbs Not Showing Collections

[Fouche]

Hello,

I need help with my breadcrumbs navigation please,

my current navigation is showing Home > Product Page.

I’ve been trying to add collections to it with no luck.

I would like it to look like the following Home > Collections > Product Page.

Or even better yet without the product page as it wouldn’t be necessary to show which page is the customer currently on so it would be something like Home > Collections >

Any help/guidance is very much appreciated!

[made4Uo]

Hi @Fouche

Do you mind sharing your website? Do you have breadcrumbs on other pages?

[Fouche]

Hi @made4Uo

Heres my website https://cosmoholics.store/

Breadcrumbs are only visible on my product pages.

[made4Uo]

Thank you. You need to copy the breadcrumb code and have it available except the home page. There is a FREE tutorial you can use here

[Fouche]

Thank you @abdulwasiu

[Fouche]

@made4Uo I Already have the same code applied which is showing

Home > Product Page.

Which is not what I want.

I’m trying to make it look as the below.

Home > Collection > Product Page

[made4Uo]

You just want to add the word Product page? Not even the product title? Do you mind sharing your breadcrumb code, so I can do some edits?

[Fouche]

@made4Uo See for example at the moment, it is pointing directly towards the product page (product page i’m currently viewing.

Home > Imagic lipliner Pencil (Which is the product).

However, i want it to be pointing to the collections list and then the product page.

So it will be something like this.

[Fouche]

Here’s the code

.breadcrumbs { margin: 0 0 2em; } .breadcrumbs__list { list-style-type: none; margin: 0; 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; } .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; }

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

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

{%- endunless -%}

[Skye_1]

Hi, @Fouche

Thanks for posting! I hope you’re well.

The breadcrumbs that will display depends on the route the customer chose to access the product page. For example, if your customer don’t have collections your breadcrumbs won’t state as such. Perhaps you can provide us with your URL so we can take a look at what you currently have.

[Fouche]

Hi @Skye_1

Here you go https://cosmoholics.store/

[made4Uo]

Hi @Fouche

@Skye_1 is right, you need the customer to go to the collection first then to the product. It will not provide the collection where the product belong if the customer goes directly to the product.

The below code is responsible in determining if it is a collection url

{%- if collection.url -%}
- {{ collection.title | link_to: collection.url }}

{%- endif -%}

[Fouche]

I agree @made4Uo , however, that is not the case as all my products are placed in collections but for some reason the collection is still not showing.

For example the below should be Home > Z’OREYA Professional > Z’OREYA 16 Make-up Brush Set.

However, it’s pointing directly at the product (as seen below).

[made4Uo]

You need to pass the url for the collection. Unfortunately, you need to hire someone to go in and check your code, debug it.

[Scrowp]

I made a video tutorial on Youtube about adding a breadcrumb, but many have encountered the same issue,so here is the fix to it