The Breadcrumb feature in the Be Yours theme helps customers understand where they are in your store and provides quick navigation back to the homepage or collection pages.
On product pages, some merchants may notice that the product breadcrumb does not always include a collection. For example, the breadcrumb may only show:
Home / Product title
instead of:
Home / Collection title / Product title
This guide explains why this happens and how to create a custom product breadcrumb using the Custom liquid section.
STEPS:
1. Understanding Product Breadcrumbs in Be Yours
The Be Yours Product template includes a Breadcrumb block inside the Product information section.
You can use this block to display the theme's default breadcrumb on the product page.
To add the default Breadcrumb block:
- From your Shopify admin, go to Online Store > Themes.
- Click Customize.
- Open a product template, such as Default product.
- Open the Product information section.
- Click Add block.
- Select Breadcrumb.
- Move the block to the desired position.
- Click Save.
The Breadcrumb block includes simple settings such as:
| Setting | Description |
|---|---|
| Text style | Choose the breadcrumb text style. |
| Show divider | Adds a divider below the breadcrumb. |
2. Why Collections May Not Appear in Product Breadcrumbs
A common question is:
There are no collections in the product breadcrumbs.
This can happen because Shopify product pages do not always have a collection context.
For example, a customer may access the same product through different URLs:
| URL type | Example |
|---|---|
| Product URL without collection context | /products/product-handle |
| Product URL with collection context | /collections/collection-handle/products/product-handle |
When a product is opened without a collection context, the theme may not know which collection should be shown in the breadcrumb.
This is also important because one product can belong to multiple collections.
Example:
| Product | Collections |
|---|---|
| Linen Shirt | Men, New Arrivals, Summer Collection, Sale |
In this case, Shopify does not automatically know which collection should be considered the “main” collection for the breadcrumb.
3. Recommended Workaround: Use Custom Liquid
If you want the breadcrumb to always show a collection on product pages, you can add a Custom liquid section above the Product information section.
This method displays:
Home / First product collection / Product title
If the product is opened from a collection page, the code will use the current collection first. If no current collection exists, it will use the first collection assigned to the product.
4. Adding the Custom Liquid Breadcrumb
To add a custom product breadcrumb:
- From your Shopify admin, go to Online Store > Themes.
- Click Customize.
- Open the product template you want to edit.
- Click Add section.
- Select Custom liquid.
- Drag the Custom liquid section to the top of the product template.
- Paste the code below into the Custom liquid field.
- Set the top and bottom padding to
0if you want to reduce spacing. - Click Save.
Paste this code:
{% liquid
assign breadcrumb_collection = collection
if breadcrumb_collection == blank and product.collections.size > 0
assign breadcrumb_collection = product.collections.first
endif
%}
<nav class="page-width product-custom-breadcrumb" role="navigation" aria-label="Breadcrumb">
<a class="link link--underline" href="{{ routes.root_url }}">Home</a>
{% if breadcrumb_collection != blank %}
<span aria-hidden="true"> / </span>
<a class="link link--underline" href="{{ breadcrumb_collection.url }}">
{{ breadcrumb_collection.title }}
</a>
{% endif %}
<span aria-hidden="true"> / </span>
<span>{{ product.title }}</span>
</nav>
Result example:
Home / Summer Collection / Linen Shirt
5. Optional: Add Simple Styling
If you want to adjust the breadcrumb spacing or text size, you can add a small style block in the same Custom liquid section.
Paste this version instead:
{% liquid
assign breadcrumb_collection = collection
if breadcrumb_collection == blank and product.collections.size > 0
assign breadcrumb_collection = product.collections.first
endif
%}
<style>
.product-custom-breadcrumb {
padding-top: 0;
padding-bottom: 0;
font-size: 1.4rem;
}
.product-custom-breadcrumb span,
.product-custom-breadcrumb a {
display: inline;
}
</style>
<nav class="page-width product-custom-breadcrumb" role="navigation" aria-label="Breadcrumb">
<a class="link link--underline" href="{{ routes.root_url }}">Home</a>
{% if breadcrumb_collection != blank %}
<span aria-hidden="true"> / </span>
<a class="link link--underline" href="{{ breadcrumb_collection.url }}">
{{ breadcrumb_collection.title }}
</a>
{% endif %}
<span aria-hidden="true"> / </span>
<span>{{ product.title }}</span>
</nav>
You can adjust the font-size value if needed.
6. Choosing Which Collection Appears
The custom code above uses this logic:
- Use the current collection if the product page has collection context.
- If there is no current collection, use the first collection assigned to the product.
- If the product is not assigned to any collection, show only
Home / Product title.
This is usually enough for most stores.
However, if a product belongs to multiple collections, the first collection may not always be the collection you want.
Example:
| Product | Assigned collections |
|---|---|
| Linen Shirt | New Arrivals, Shirts, Summer Collection |
The breadcrumb may show the first assigned collection, depending on Shopify's collection order.
If you need full control over the breadcrumb collection, you may want to use a product metafield to define a primary collection. This requires additional custom code.
7. Hiding the Default Breadcrumb Block
If you use the Custom liquid breadcrumb, you may want to remove the default Breadcrumb block to avoid duplicate breadcrumbs.
To remove the default Breadcrumb block:
- Open the product template in the Theme Editor.
- Open the Product information section.
- Find the Breadcrumb block.
- Remove it, or hide it if your editor supports hiding blocks.
- Click Save.
Recommended setup:
| Breadcrumb method | Recommended action |
|---|---|
| Use default Be Yours Breadcrumb block | Do not add the Custom liquid breadcrumb. |
| Use Custom liquid breadcrumb with collection fallback | Remove the default Breadcrumb block. |
8. Notes and Limitations
Please note the following behavior:
- The default Breadcrumb block follows the theme's built-in breadcrumb logic.
- Product breadcrumbs may not include a collection if the product page is opened without collection context.
- A product can belong to multiple collections, so Shopify may not always know which collection should be shown.
- The Custom liquid workaround uses the current collection first, then falls back to the first product collection.
- If the product has no assigned collections, the breadcrumb will show only
Home / Product title. - This workaround creates a visual breadcrumb. It does not automatically change Shopify's product structured data.
- If you need advanced SEO breadcrumb schema, custom development may be required.
Troubleshooting
If the custom breadcrumb does not display correctly, please check the following:
- Make sure the Custom liquid section is added to a product template.
- Make sure the Custom liquid section is placed above the Product information section if you want the breadcrumb at the top.
- Make sure the product is assigned to at least one collection if you want a collection to appear.
- If no collection appears, check whether the product has any collections assigned in Shopify admin.
- If the wrong collection appears, the product may belong to multiple collections and the first collection may not be the preferred one.
- If you see duplicate breadcrumbs, remove the default Breadcrumb block from the Product information section.
- If spacing is too large, reduce the Custom liquid section padding to
0. - Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System.
Share:
Store Locator Section
Bundle Product Section