Breadcrumb trail with automatic hierarchy detection. Contextual navigation to improve SEO and UX.
Breadcrumb
The breadcrumb is a secondary navigation bar that displays the hierarchy of the current page. It helps visitors orient themselves within your store's structure and makes it easy to navigate to parent pages.
How it works
The breadcrumb automatically detects the current page's hierarchy from the Shopify navigation structure and the URL. No manual configuration is needed.
Example paths
| Page | Breadcrumb |
|---|---|
| Product | Home > Collection > Product name |
| Collection | Home > Collections > Collection name |
| Page | Home > Page title |
| Blog | Home > Blog > Article title |
| Search | Home > Search |
| Cart | Home > Cart |
ℹ️On a product page, the collection shown in the breadcrumb is the one the visitor arrived from. If the visitor lands directly on the product (direct link, Google), the product's primary collection is used.
Automatic detection
The breadcrumb determines the hierarchy from several sources:
| Source | Priority | Description |
|---|---|---|
| Referrer | High | If the visitor came from a collection, it is used |
| Default collection | Medium | The product's first collection |
| URL | Low | URL analysis to infer the structure |
Display
| Aspect | Description |
|---|---|
| Separator | Chevron (>) between each level |
| Active page | The last element (current page) is not clickable |
| Home | Always the first element, with the label "Home" |
| Truncation | On mobile, intermediate levels may be truncated |
Responsive
| Viewport | Behavior |
|---|---|
| Desktop | Full path displayed on a single line |
| Mobile | Abbreviated path if too long, with horizontal scroll or truncation |
💡On mobile, the breadcrumb can get long and span multiple lines. The theme handles this automatically by truncating intermediate levels when necessary.
SEO
The breadcrumb automatically generates structured data (schema.org BreadcrumbList) to improve display in Google search results:
{
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://..." },
{ "@type": "ListItem", "position": 2, "name": "Dresses", "item": "https://..." },
{ "@type": "ListItem", "position": 3, "name": "Long Black Dress" }
]
}ℹ️Breadcrumb structured data is automatically generated. It allows Google to display the breadcrumb trail directly in search results, improving click-through rate (CTR).
Supported pages
The breadcrumb is automatically displayed on all pages except the homepage:
| Page | Breadcrumb | Notes |
|---|---|---|
| Homepage | No | No breadcrumb on the homepage |
| Collection | Yes | Home > Collection name |
| Product | Yes | Home > Collection > Product |
| Page | Yes | Home > Page title |
| Blog | Yes | Home > Blog |
| Article | Yes | Home > Blog > Article |
| Search | Yes | Home > Search |
| Cart | Yes | Home > Cart |
| Account | Yes | Home > My Account |
Best practices
- Keep it active: The breadcrumb is a web navigation standard. Visitors expect to find it, especially on stores with a large catalog
- SEO: The generated structured data improves your search ranking. Don't disable the breadcrumb for aesthetic reasons
- Organized collections: The breadcrumb is most useful when your collection structure is logical and hierarchical
- Short names: Short collection and product names make the breadcrumb more readable, especially on mobile