Breadcrumb on website

Store Design

Topic summary

A Shopify store owner is trying to implement breadcrumbs that display the full navigation path (Home > Collection > Product) but currently only shows “Home > Product.” They want to avoid paying for additional apps and have already inserted code from a forum video guide.

Technical Solutions Proposed:

  • Modify the card-product.liquid file by changing card_product.url to card_product.url | within: collection
  • Alternative approach using sessionStorage with JavaScript to save collection links

Current Status:

  • The code modification was attempted but didn’t resolve the issue
  • The breadcrumb settings are enabled in the theme customization but collections still don’t appear
  • One participant suggests the issue may stem from how product links are structured on collection pages

Outcome:
The problem remains unresolved. A later participant recommends an app-based solution (FDL Breadcrumbs & Collections) for easier implementation, though this contradicts the original poster’s preference to avoid additional app costs.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I want to add breadcrumbs to my store I don’t want to pay for more apps as I am spending enough on apps etc as it is.

I have managed to get some sort of breadcrumb on my page but it will only show the Home> Product it won’t show the whole list of pages/collections it has gone through which is what I want.

I went to shopify support and they have been nothing but pointless and won’t even let me use my 60 minutes free customisation on this.

The picture shows what I managed to do so far

breadcrumb1.PNG

2

Hi @brendonx ,

Please send the website link, I will check it for you

3

https://202c02-4.myshopify.com/

password: bahgow

4

Hi @brendonx ,

You want this:

Screenshot.png
Screenshot.png1470×174 8.91 KB

There will be 2 solutions for it:

  • 1: Change the product link in the collection page, then you can check with the collection object and display it, it will display as a link:

domain/collections/collection-link/products/product-link

  • 2: Use sessionStorage to save the link collection and add it with JS.

Hope it is clear to you

5

I may be being dumb, or it maybe that I have spent the last 2 days fiddling with this breadcrumb thing among doing everything else needed to the site before we can change our domain over from the old site to this one,

But I don’t get what you mean by change the product link in the collection page or even using session storage to save the link.

6

Hi @brendonx ,

For the first way, you need to go to the card-product.liquid file and change:

card_product.url

=>

card_product.url | within: collection

I hope it helps!

7

I have done this but it still not showing the whole lot just home > Product

8

Hi @brendonx ,

I checked and the app is displaying the collection page?

If so, you won’t be able to change the link this way, can you try contacting the app?

9

It’s not an app, it was a code I inserted in the places I was told to by a video guide which was posted on this forum. The settings it gives you within the website customisation I have the setting turned on to show the Collection but it just won’t show it.

10

Hi!
Adding breadcrumbs manually is possible through Liquid edits, but if you’re not comfortable with code or want more control, you might consider an app-based solution.

I’ve been helping merchants with this using:
:backhand_index_pointing_right: FDL Breadcrumbs & Collections

It adds automatic breadcrumbs, and you can even build nested collections visually — super helpful for larger catalogs and SEO.
Let me know if you’d like a quick walkthrough!