Breadcrumbs are a critical feature for improving website navigation and enhancing SEO. When implemented correctly, they provide a better user experience and boost your Shopify store's visibility in search results. In this guide, we'll show you how to add a 4-level breadcrumb (Home > Primary Category > 2nd-level Category > 3rd level Category > Product) to your Shopify product pages, dynamically generate breadcrumb schema, and explain the SEO benefits of doing so.

a woman & man checking goods tags in the warehouse

What Are Breadcrumbs and Why Are They Important?

Breadcrumbs are navigational aids that show users where they are on a website. For instance, on a product page, breadcrumbs might look like this:

Home > Electronics > Smartphones > Android Phones > Product Name

Breadcrumbs not only help users navigate your store but also play a significant role in improving your site’s search engine optimization (SEO).

SEO Benefits of Breadcrumbs & Breadcrumbs Schema

  • Improved Crawling and Indexing

    Breadcrumbs create internal links that help search engines like Google understand your site's hierarchy. This improves the way your site is crawled and indexed, ensuring important pages are easily discoverable.

  • Enhanced Search Result Appearance

    When you add breadcrumb schema markup, search engines can display breadcrumbs in search results. This provides a cleaner, more informative appearance, improving your click-through rate (CTR).

  • Better User Experience (UX)

    Breadcrumbs make it easier for users to navigate between categories and products, reducing bounce rates and increasing time spent on your site—key factors in SEO rankings.

  • Keyword Reinforcement

    Breadcrumbs often include category names that align with targeted keywords. This provides additional context to search engines about the content of your page.

  • Reduced Bounce Rates

    When users can easily find their way back to a category or subcategory, they’re more likely to stay on your site rather than leave, which can positively impact your rankings.

Step-by-Step Guide to Adding a 4-Level Breadcrumb to Shopify

Step 1: Create Metafields for Breadcrumb Levels

1.1 Set Up Product Metafields

Metafields allow you to dynamically assign breadcrumb categories to individual products.

  1. Navigate to Metafields in Shopify
    • Go to Shopify Admin > Settings > Custom Data > Products.
  2. Create Three Metafields:
    • Primary Collection: Stores the first-level category (e.g., Electronics).
    • Secondary Collection: Stores the second-level category (e.g., Smartphones).
    • Tertiary Collection: Stores the third-level category (e.g., Android Phones).
Field Name
Namespace & Key
Content Type
Description
Primary Collection
breadcrumb.primary
Collection Reference
Link to the main category (e.g., Electronics).
Secondary Collection
breadcrumb.secondary
Collection Reference
Link to a subcategory (e.g., Smartphones).
Tertiary Collection
breadcrumb.tertiary
Collection Reference
Link to a deeper category (e.g., Android Phones).
  1. Save these metafields.

1.2 Assign Collection References to Products

  1. Go to Products > Select a product.
  2. In the Metafields section, select collections for:
    • Primary Collection
    • Secondary Collection (optional, for deeper hierarchies).
    • Tertiary Collection (optional, for further nesting).

This setup dynamically pulls the correct collection URL instead of hardcoding it.

Step 2: Create or Update(if your theme has breardcrumb.liquied files) the Breadcrumb Include File

2.1 Create or Edit the Snippet File

  1. Navigate to Online Store > Themes > Edit Code > Snippets.
  2. Add a new snippet called breadcrumb.liquid.

2.2 Add Dynamic Breadcrumb Code

Use the following updated breadcrumb code to dynamically fetch collection URLs. Copy the code and replace the product page breadcrumb part code. 
            <nav class="breadcrumb">
  <a href="{{ shop.url }}">Home</a> ›
  {% if product.metafields.breadcrumb.primary %}
    <a href="{{ product.metafields.breadcrumb.primary.url }}">{{ product.metafields.breadcrumb.primary.title }}</a> ›
  {% endif %}
  {% if product.metafields.breadcrumb.secondary %}
    <a href="{{ product.metafields.breadcrumb.secondary.url }}">{{ product.metafields.breadcrumb.secondary.title }}</a> ›
  {% endif %}
  {% if product.metafields.breadcrumb.tertiary %}
    <a href="{{ product.metafields.breadcrumb.tertiary.url }}">{{ product.metafields.breadcrumb.tertiary.title }}</a> ›
  {% endif %}
  <span>{{ product.title }}</span>
</nav>

Step 3: Add Schema Markup for Breadcrumbs

To improve SEO, we’ll add dynamic JSON-LD schema for breadcrumbs. This schema will reflect the breadcrumb hierarchy dynamically based on the collections selected in the product page.

3.1 Add Schema to the Breadcrumb Snippet

Modify the breadcrumb.liquid snippet to include this schema code.

            <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {% if product.metafields.breadcrumb.primary %}
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ product.metafields.breadcrumb.primary.title }}",
      "item": "{{ product.metafields.breadcrumb.primary.url }}"
    },
    {% endif %}
    {% if product.metafields.breadcrumb.secondary %}
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.metafields.breadcrumb.secondary.title }}",
      "item": "{{ product.metafields.breadcrumb.secondary.url }}"
    },
    {% endif %}
    {% if product.metafields.breadcrumb.tertiary %}
    {
      "@type": "ListItem",
      "position": 4,
      "name": "{{ product.metafields.breadcrumb.tertiary.title }}",
      "item": "{{ product.metafields.breadcrumb.tertiary.url }}"
    },
    {% endif %}
    {
      "@type": "ListItem",
      "position": 5,
      "name": "{{ product.title }}",
      "item": "{{ product.url }}"
    }
  ]
}
</script>

Step 4: Include the Breadcrumb Snippet in the Product Template

  1. Navigate to product.liquid or product-template.liquid in your theme.
  2. Insert the breadcrumb snippet where you want the breadcrumb to appear
            {% render 'breadcrumb' %}

Step 5: Test and Validate

5.1 Check Breadcrumb Display

Open a product page and confirm the breadcrumb links reflect the hierarchy you’ve set in the metafields.

5.2 Validate Schema Markup

By using Shopify’s metafields to dynamically generate breadcrumb links and schema markup, you can create a multi-level breadcrumb system that enhances both usability and SEO. This implementation is scalable, accurate, and aligned with search engine best practices, making it an essential feature for your Shopify store.

Start adding breadcrumbs today to improve user navigation, strengthen internal linking, and boost your search visibility!

Share to social channels

For further assistance or custom Shopify store solutions, feel free to contact us.

or

Browse Services