The Breadcrumbs block uses the Collections tree to render a breadcrumb trail on your storefront. This helps customers understand the navigation path and easily explore related collections.
🔍 How it works with collections tree:
Assume your Collections tree is structured like this:
Electronics
└── Mobile Phones
└── iPhone
If a customer is viewing a collection page, the Breadcrumbs block finds all parent collections (if any) from your Collections tree, and displays the breadcrumb path.
Example on collection pages:
Customer visits a collection page with the url: /collections/iphone
→ Breadcrumbs display:
Home / Electronics / Mobile Phones / iPhone
Example on product pages:
If a customer is viewing a product page with a collection in the URL, the block uses that collection to build the breadcrumb.
Customer visits a product page with the url: /collections/iphone/products/iphone-15-pro
→ Breadcrumbs display:
Home / Electronics / Mobile Phones / iPhone / iPhone 15 Pro
If a customer is viewing a product page without a collection in the URL, the app looks for the product’s default collection (configured in the product editing page by using metafields), then finds the parent collections using your Collections tree.
Example: if customer visits /products/iphone-15-pro, and the default collection is set to “Mobile Phones”
→ Breadcrumbs display:
Home / Electronics / Mobile Phones / iPhone 15 Pro
If no default collection is set, and the collection is not in the URL, the Breadcrumbs block cannot determine any parent collection and will only show the product title.
Example: customer visits /products/iphone-15-pro, but default collection is not set
→ Breadcrumbs display:
Home / iPhone 15 Pro
⚠️ Note: If the collection (either from the URL or the product’s default collection) is not included in the collections tree, the breadcrumbs will fall back to a simplified structure:
- On a collection page: Home > [Collection title]
- On a product page: Home > [Product title]
Adding the Breadcrumbs Block to Your Theme
You can add the Breadcrumbs block to your theme in two different ways:
Option 1: Add via the App Dashboard
-
After installing the app, go to the App Dashboard.
-
Locate the “How to setup blocks?” section and click the Add blocks button, then click the Breadcrumbs row.
-
The app will automatically insert the Breadcrumbs block into the Header group of your current working theme.
-
You can also change the working theme by selecting a different theme from the dropdown in the app interface.
⚠️ Note: This method might not work properly if your theme does not have a Header group section defined. In that case, please use Option 2 below.
Option 2: Add manually via Shopify’s Theme Editor
-
From your Shopify admin, go to Online Store > Themes.
-
Click Customize on the theme you want to edit.
-
Navigate to the Header group (or any places where you want to place the breadcrumbs).
-
Click Add section, then choose Breadcrumbs from the list of app blocks.
-
Drag and drop the block to your preferred position.
-
Click Save to apply the changes.
Use this method if you want to have more granular control over where breadcrumbs are displayed in your theme.
🔖 Recommendation
We recommend placing the Breadcrumbs block inside the Header group.
This ensures that breadcrumbs are visible across all pages where applicable — including collection pages and product pages — without needing to add the block multiple times in different sections.
🏠 Breadcrumbs do not appear on the homepage by design.
Configure breadcrumbs block
Item label
The item labels let you customize the label shown for the last item in the breadcrumb trail — which represents the page the customer is currently viewing.
You can change these labels to match your store’s tone or language. Here’s what each field means:
-
Home page: Label for the homepage. Example: Home.
-
Cart page: Label for the cart page. Example breadcrumb: Home > Cart.
-
List collection page: Label for the default collections list page (/collections). Example: Home > Collections.
-
Catalog page: Label for the catalog page (/collections/all).
👉 Tip: Add a prefix --- (e.g. ---All products) to hide this label from breadcrumbs on collection pages. It will still show when the customer visits /collections/all directly.
-
Search results page: Label for the search results page. You can use the [terms] expression to display the search keyword. Example: Search for 'keyboard'.
- Customer accounts:
-
Account dashboard page: Example: Your account.
-
Activate account page, Create account page, Login page, Customer addresses page: Labels for various customer account pages.
-
-
Order details page: You can use [name] to display the order name. Example: Order #1234.
-
Not found page: Label for the 404 page. Default: Not found.
Layout and Typography
-
Block max width: Set the maximum width for the breadcrumb block (in pixels).
-
Font size: Adjust the font size of the breadcrumb text.
-
Separated icon size: Adjust the size of the icon between breadcrumb items.
-
Bold the current item: Toggle this option to make the last breadcrumb item (the current page) appear bold.
Margin
-
Margin top / bottom: Add space outside the top or bottom of the breadcrumb block to separate it from other content.
Padding
-
Top and bottom / Left and right: Add space inside the breadcrumb block.
👉 Note: It’s recommended to use padding when a background color is applied. This helps create visual spacing between the content and the edges of the block, making it more balanced and readable.
Colors
-
Text: Customize the color of the breadcrumb text.
-
Background: Choose a background color. Default is transparent.
Advanced customization
-
Custom separated icon: You can paste your own SVG code here to replace the default icon used between breadcrumb items.