# Breadcrumbs

Shopify does not support nesting of pages / collections - so why breadcrumbs are visually helpful - there is no native way to actually achieve this - the below outlines a solution we use in Orion in order to achieve this.

For large product stores, these improve usability, reduces bounce rates, and creates a clearer browsing experience on both product and collection pages.

Using this solution, brands can:

1. Enable/disable per collection page.
2. Opt to show on collection and/or product page.
3. Control the size of the breadcrumbs.
4. Select case - uppercase, lowercase etc.
5. Choose seperate style ie: dot (`•`), vertical bar (`|`), or slash (`/`).
6. Update colour
7. Control the spacing between text.

### Managing The Section

***

To Enable the breadcrumbs please make sure all the metafields are created for both product and collection page.

1. To Create a Metafield go to settings, navigate to Metafields and Metaobjects > Products.
2. Create a metafield inside products with name Breadcrumb Parent and change its namespace and key to “breadcrumbs.breadcrumb\_parent” and select “collection” in metafield Type.

<figure><img src="/files/ldNIfZmN6hY5FsNYngPC" alt=""><figcaption></figcaption></figure>

3. Go back and navigate to collection metafields and create a same metafield with name “Breadcrumb Parent” and change its namespace and key to “breadcrumbs.breadcrumb\_parent”, select metafield type as “Collection”.

<figure><img src="/files/BgvO6KnnBEBteosJjHl9" alt=""><figcaption></figcaption></figure>

4. Go Back and create another metafield with the name “Breadcrumbs Root” and change its namespace and key to “breadcrumbs.root”. Select Metafield type to “True/False”.

<figure><img src="/files/brMhywgIUsi4mvsMkUKW" alt=""><figcaption></figcaption></figure>

5. Once these are created, go to Online Store > Themes > Edit Theme (customizer).
6. Navigate to theme settings from the left panel, and goto breadcrumbs. You can turn breadcrumbs on/off and set colours spacing and size from here.
7. Once the settings are done hit **save**.


---

# 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://docs.almond.studio/products/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.