# Edit product breadcrumbs using metafields

{% embed url="<https://youtu.be/TM0L8nJPk0s/>" %}

## **Why use the product page breadcrumb?**

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

**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.

{% hint style="info" %}
Learn how to add breadcrumbs in Zest: [breadcrumbs](https://docs.foxecom.com/zest-theme/collections-and-products/product-page/breadcrumbs "mention")
{% endhint %}

## How to create custom breadcrumbs

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

{% hint style="info" %}
Custom breadcrumbs with metafields are supported in :sparkles: **Zest version 7.3.0 and above**. :sparkles:

See our [Changelog](https://help.foxecom.com/changelog/zest?utm_source=foxecom\&utm_medium=help_center_zest_edit_product_breadcrumbs_using_metafields\&utm_campaign=anchor_text\&utm_term=changelog).
{% endhint %}

### **Steps:**

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

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZQGnd9UOMjZqBfOf4DhT%2Fimage.png?alt=media&#x26;token=34b3c776-e819-4e93-b135-c5a23c4087d8" alt=""><figcaption></figcaption></figure>

* Use any **Name** you want, and insert the **Namespace and key** as '**breadcrumb.primary\_collection**'.
* Select the metafield type as **Collection.**

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F598CU0a7jQCjrlDUdk2t%2Fimage.png?alt=media&#x26;token=114ebc86-8749-42e7-8844-0b613447b80c" alt=""><figcaption></figcaption></figure>

* Click **Save**.

#### 2. In the Product setup, **select a collection from a list** to display a custom product breadcrumb.&#x20;

* From **Shopify admin** > **Products**, select a product you want to add custom breadcrumbs.
* In the **Metafields** section, select a collection from your collection list.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FbDepauH6GrWXheTshOjh%2Fimage.png?alt=media&#x26;token=a9ca71e0-c3c2-442f-ab92-e5aa64765f3d" alt=""><figcaption></figcaption></figure>

* 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.&#x20;

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FD34fKcgpGxF2MiyvJgew%2Fimage.png?alt=media&#x26;token=4367f3bb-e8d6-43a9-b8fe-d2cfe5b65019" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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).
{% endhint %}