Usually, people can just add the Breadcrumb block in the theme editor, and it would work. But sometimes, that default configuration doesn’t work. These are FAQ from support questions I’ve gotten.
“Why are only 2 levels shown, instead of 4 to 5 levels in nested breadcrumbs?”
The most likely answer is that your current navigation menus do not sufficiently have the whole breadcrumb path.
A common configuration I see people have is in the menu is “Collection 1 > Collection 2”. The path they expect is: “Collection 1 > Collection 2 > Collection 3 > Product”.
To fix this, you simply need to configure the navigation menu to have: “Collection 1 > Collection 2 > Collection 3”.
The simplest way to understand this is probably creating an entirely new navigation menu (let’s call it “ez-breadcrumb”), with ONLY the 3 collections, and *none* of the other collections, so that it’s clear and obvious how the app is determining the breadcrumb: “Collection 1 > Collection 2 > Collection 3”.
Here one example illustrating:
For this person, I specifically created *only* “Shop > British Moments > 1st Floor …”, so that it was obvious how to configure app to get the whole breadcrumb path “Shop > British Moments > 1st Floor … > Product”.
“Why is the breadcrumb path different when going from this Collection to the Product?”
Example Scenario:
- You are on page “Collection 1 > Collection 2”
- You click on a product Z in Collection 2.
- The breadcrumb for product is “Collection Random > Product Z”…..instead of “Collection 1 > Collection 2 > Product Z”
What’s going on here?
How the app works is that it finds the breadcrumb path by searching the navigation menu from left to right. Once it finds a path, the app stops there.
Your “Collection Random” probably appeared before Collection 1 in the navigation menu. The app finds “Product Z” belongs to “Collection Random”, and prints breadcrumb “Collection Random > Product Z”.
How to fix this? Couple ideas
- You could remove Product Z from “Collection Random”
- You could simply move Collection Random after Collection 1 in the navigation menu, then the app would pick up the Collection 1 breadcrumb first.
“How do I get nested breadcrumbs using my mega menu?”
It’s pretty simple. Usually you have your mega menu setup as a navigation menu like this:
All you have to do is ask the app to use that mega menu. Configure this setting (see screenshot) using the handle of the mega menu (in this example, the handle is `mega-menu`, circled red)
How to Add Breadcrumbs to Product Pages in Shopify
How to Make Breadcrumbs based on Menu Structure in Shopify?
The “EZ Add Breadcrumb” app automatically bases the breadcrumbs on the menu structure. You can navigate to the menu structure here:
What is the max-level these nested breadcrumbs can go?
They go to a max depth of 5 levels. This is due to a well-known limitation in Shopify, where they only allow a max of 3 levels in their navigation menu: “You can nest links up to three levels deep” (https://shopify.dev/docs/themes/navigation-search/navigation). The app then adds “Home” to the beginning, and your product to the end, for a total of 5 levels.
There are other apps that can nest breadcrumbs deeper. However, the other apps cannot properly display the SEO Schema BreadcrumbList for the full path, while my app fully displays the schema up to 5-levels (see the HTML source code in this demo store example from a real customer). This is because they use Javascript for their breadcrumbs, while my app is entirely in liquid. Google needs to read the LD+JSON without having to run Javascript!
How to modify the CSS of the breadcrumbs?
Using these settings:
