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

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

{% hint style="info" %}
By default, breadcrumbs display the name of the collection that comes first in alphabetical order (if that product is included in multiple collections).
{% endhint %}

## How to create custom breadcrumbs for individual products

In Sleek, 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**.

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/uz9JyNjSTvFtHu11yGPT/image.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fa1eQbxHFaDC0PLNeonsw%2Fimage.png?alt=media&#x26;token=c142e92f-8c8e-4abd-8dc7-43fac7b23de0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fzlbey5nhJcAcA4kotA1a%2Fimage.png?alt=media&#x26;token=1d461f53-8fad-43d3-96c7-8cb4120e1a50" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F5ovf9hDTNYUFUavOBBbj%2Fimage.png?alt=media&#x26;token=8d2adcd7-7b3b-4142-8555-38d4ae0e0d68" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>
