# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pipeline.groupthought.com/products/product-pages/breadcrumbs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
