# Breadcrumbs

<Embed url="https://youtu.be/TM0L8nJPk0s" />

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 type="success">
  Steps

  1. In the theme editor (**Customize**), open the template selector
  2. Select the product template you want to add breadcrumbs to.
  3. Locate the **Breadcrumbs** section.
</Hint>

* **Text alignment**: Set how the breadcrumbs are aligned: Left/Center/Right.
* Remove, hide, or reorder the section if you want

<Hint type="info">
  By default, breadcrumbs display the name of the collection that comes first in alphabetical order (if that product is included in multiple collections).
</Hint>

## How to create custom breadcrumbs for individual products

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

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_x5l2qIi3.png)

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_dWkC37cf.png)

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_42WwYmSt.png)

You can modify the spacing above and below the section by adjusting the slider to change the values of the Top padding and Bottom padding.

![image](https://docs-assets.foxecom.app/hyper-theme/image_fn3I2j8Y.png)