Edit product breadcrumbs using metafields

Create custom breadcrumbs for individual products

Why use the product page breadcrumb?

Breadcrumb is a type of secondary navigation scheme that reveals the customers’ location on the website.

Breadcrumbs can improve how a user and Google navigate a website, especially if your website has many products or pages.

Furthermore, breadcrumbs have been proven to decrease bounce rates, keeping users on a website longer.

Lastly, the best benefit of breadcrumbs is SEO-boosting. Google bots use breadcrumbs to categorize and contextualize content in search results more efficiently.

Learn how to add breadcrumbs in Zest: Breadcrumbs

How to create custom breadcrumbs

In Zest, you can set a custom product breadcrumbs for each of your products.

Custom breadcrumbs with metafields are supported in ✨ Zest version 7.3.0 and above. ✨

See our Changelog.

Steps:

1. Define a Product Metafield in Shopify admin > Settings > Custom data.

• Click the button Add definition to create a new product definition.

• Use any Name you want, and insert the Namespace and key as 'breadcrumb.primary_collection'.

• Select the metafield type as Collection.

• Click Save.

2. In the Product setup, select a collection from a list to display a custom product breadcrumb.

• From Shopify admin > Products, select a product you want to add custom breadcrumbs.

• In the Metafields section, select a collection from your collection list.

• Click Save.

3. Enable the breadcrumbs on your theme editor.

Ensure that the option to Show breadcrumbs is checked and the dynamic data source is linked.

Products without a metafield value for the Custom breadcrumbs will display the name of the collection that comes first in alphabetical order (if that product is included in multiple collections).