# Breadcrumbs

With Pipeline, you can create and display custom product breadcrumbs for every product you offer. This feature enables shoppers to easily navigate back to a specific collection that you have configured.

<div data-full-width="true"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FShWWI60gJtAtktsF12dz%2Fbreadcrumb%20intro%20smaller%20cropped.png?alt=media&#x26;token=05d1ab5a-cedc-4fa1-9313-d36b75940f2e" alt=""><figcaption></figcaption></figure></div>

### Advantages

Using a custom breadcrumb helps resolve issues:

* Subcollections
* SEO links for when products are linked from both /products/ and /collection/&#x20;
* Home breadcrumbs

## How to create

> Custom breadcrumbs with metafields support added in **Pipeline 7.1**

A few basic steps exist to set up and start using custom breadcrumbs. Here is a quick summary of the steps:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings -> Custom data, define a **product metafield**. The Content type is Collection, List of collections (easy step).&#x20;
2. In the Product Setup, **choose a collection from a list** for any of your products that will be displaying a product breadcrumb.&#x20;
3. In the Theme Editor, ensure that the option to **Show breadcrumbs** is checked and the dynamic data source is linked.&#x20;
   {% endhint %}

### Step 1&#x20;

In the Shopify Admin -> Settings -> Custom data, choose Products:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FEOKvUUYRH4DHStcwDQUX%2FCustom%20data%20in%20Settings.png?alt=media&#x26;token=44ff4304-4d29-4764-a8ec-59794fceefda" alt=""><figcaption></figcaption></figure>

* Use the "**Add definition**" button to create a new product definition
* For the Name, use any name you like. We will use "Breadcrumbs" in our example.&#x20;
* Click on the Select type button and type in "Collection", then select **Collection**:&#x20;

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FHqAWfidpMDIFJDtXpmLQ%2Fmetafield%20-%20collection%20smaller%20.png?alt=media&#x26;token=249a5411-05f5-418c-92cf-51fa1b22fa33" alt=""><figcaption></figcaption></figure>

* Choose **List of collections** (important):

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fro5hBEhJ8W0tMcsxknVm%2Fmeta%20breadcrumb%20list%20of%20collections.png?alt=media&#x26;token=7d8a23c3-5277-44d0-8ee0-488a97be0a6d" alt=""><figcaption></figcaption></figure>

* Press the **Save** button to complete

### Step 2

After creating the Breadcrumbs metafield, we can now choose from a list of collections in our Shopify Admin -> Products, then pick a product to configure the custom breadcrumb:

{% embed url="<https://www.loom.com/share/dd9b6888c6d6485ea6b95414995fa027?sid=3d96397b-6312-4d7b-8864-cb299f0d6cfa>" fullWidth="true" %}

### Step3

In the Theme Editor, we can activate Breadcrumbs and link to our metafield:

{% embed url="<https://www.loom.com/share/94c3a77be9b146e391f5c2bff089c483?sid=99298aac-aec5-4fe9-82c2-08ad972e9d42>" fullWidth="true" %}

> ***Tip:*** Products without a metafiled value in the Product set up, won't display a breadcrumb.&#x20;

## Basic version

If your store only requires one source collection, you can use the basic setup.

### How to

In the Theme Editor under the default Product template, you can simply choose **one** collection from the list of collections and that will display on all your products. No metafield setup is required.&#x20;

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FtXPmYcwaI3ykAl0A9scW%2Fbasic%20version%20bread.png?alt=media&#x26;token=ed0ad28a-9707-4b6a-9061-981c89674050" alt=""><figcaption></figcaption></figure>

The chosen collection will appear on **All** your product pages.&#x20;

* You can create multiple product templates to only show with certain products.&#x20;
* Toggle on and off with the **Show breadcrumbs** checkbox.&#x20;
