# Breadcrumb

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fq4ywBCVYD9Kd7sLFD5Rs%2FScreen%20Shot%202021-11-05%20at%2020.34.36.png?alt=media\&token=41bef1c9-744e-47d7-8bf5-b58c17e0047a)

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.

## How to configure the Breadcrumbs

{% hint style="info" %}
Steps

1. In the theme editor (**Customize**), open the template selector.
2. Select **Products**, then **Default product.**
3. On the left-side bar, add **Breadcrumb.**
4. Make necessary changes.
5. **Save** the settings.
   {% endhint %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FpPAfjB1jR1duBPLVBgQV%2Fimage.png?alt=media&#x26;token=5d79e0f4-9ecf-4b36-bdde-1468f671fd9f" alt=""><figcaption></figcaption></figure>

You can control the container type, its positions, and whether they want to display breadcrumbs or not.

{% hint style="info" %}
When a product belongs to multiple collections, the breadcrumb displayed on the product page will reflect the collection name that appears first in alphabetical order. This automatic sorting ensures consistency in how products are categorized and optimized for SEO.
{% endhint %}

## How to create custom breadcrumbs for individual products <a href="#how-to-creat-custom-breadcrumbs-for-individual-products" id="how-to-creat-custom-breadcrumbs-for-individual-products"></a>

In Minimog, you can set custom product breadcrumbs for each of your products using metafields.

Follow the steps below:

{% stepper %}
{% step %}

### **Define a Product Metafield in Shopify admin**

{% hint style="success" %}

1. Click the button **Add definition** to create a new product definition.
2. Use any **Name** you want, and insert the **Namespace and key** as '**breadcrumbs.primary\_collection**'.
3. Select the metafield type as **Collection.**
4. Click **Save**.
   {% endhint %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FvBoDKs07jlr0lQQF0eVy%2Fimage.png?alt=media&#x26;token=0abbd97e-45bf-412f-b177-41968adb4426" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **In the Product setup, select a collection from a list to display a custom product breadcrumb**

{% hint style="success" %}

1. From **Shopify admin** > **Products**, select a product you want to add custom breadcrumbs.
2. In the **Metafields** section, select a collection from your collection list.
3. Click **Save**.
   {% endhint %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FINjr2al8Q1cKKHWCLpLe%2Fimage.png?alt=media&#x26;token=e443a08e-1fc5-415f-bb1e-e3d7c4f26a51" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Enable the breadcrumbs on your theme editor**

Make sure the **Breadcrumbs** section is added to your product template and the dynamic data source is linked.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FLY3eglY8FzFs317lrjMr%2Fimage.png?alt=media&#x26;token=88b57858-af4c-4adc-98dd-48cb82a32010" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}
