How can I modify breadcrumb navigation to include 'Collection'?

Shopify Discussion

Topic summary

A Shopify store owner wants to modify breadcrumb navigation from “Home > Product” to “Home > Collection > Product” to improve customer navigation between related products.

Current Situation:

  • The Ella theme doesn’t provide built-in settings for this breadcrumb structure
  • Standard Shopify breadcrumb code examples only show the basic “Home > Product” format

Proposed Solutions:

  • Custom coding is required since the theme lacks this feature
  • One suggestion involves adding a code snippet to include collection data:
    - {{ collection.title | link_to: collection.url }}
  • A third-party guide on implementing breadcrumbs for multi-level pages was shared as a resource

Status: The discussion remains open with no confirmed resolution. The original poster hasn’t indicated whether the suggested code modification successfully achieved the desired “Home > Collection > Product” breadcrumb structure.

Note: A side issue about incorrect currency recommendations for Swedish visitors was also identified and acknowledged.

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

Hello,

Currently my breadcrumb is only showing: “Home > Product” and I would like this to be changed into: “Home>Collection>Product” for my customers to easily navigate back to the Collection and browse other products of the same collection. Does anyone know how this is done?

My website is: https://www.bluebuddhajewelry.com/

Thank you!

Nathalie - Blue Buddha Jewelry

2

Hi Nathalie,

Just wanted to let you know that your store is recommending visitors from Sweden to shop in euro, which is not actually used in Sweden.

Screenshot from 2023-11-03 21-26-39.png
Screenshot from 2023-11-03 21-26-39.png1919×987 255 KB

As for the breadcrumb navigation, this change would need to be custom coded if your theme doesn’t provide a setting to show the collection.

3

Hi Fadi,

Thank you for checking my website out and tell me that. I just migrated from WooCommerce to Shopify and still have to get a bit familiar with using Shopify atm. We mainly have visitors from the Netherlands, but want to get ready to ship internationally so it’s good to get it fixed.

Unfortunately my Theme (Ella) does not provide this. Do you know if there is any guide available for changing the code so it shows the breadcrumbs more detailed?

Thank you.

4

This may help: https://shopify.github.io/liquid-code-examples/example/breadcrumb-navigation

5

The problem is not that my breadcrumb is non-existent though. This specific code unfortunately shows the same kind of breadcrumb as it already did: Home > Product. Do you know how to get the collection in between? Home > Collection > Product. For example: Home > Gemstone Necklaces > Necklace Rose Quartz

6

I haven’t actually used that example, but I believe you’ll get the collection by adding:

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

Screenshot from 2023-11-03 22-03-33.png
Screenshot from 2023-11-03 22-03-33.png1919×987 155 KB

7

Did you end up finding a solution to this? Looking for the same thing here.

8

Adding breadcrumbs in Shopify has been a huge help for me, especially when working with third-level pages. This guide was incredibly useful: www.codeniden.com/how-to-add-breadcrumbs-on-shopify