Shopify Breadcrumbs: SEO Issues & Fixes

Breadcrumbs are a key part of technical SEO performance. But on Shopify, out of the box they’re practically useless.

In this short guide, I’ll show you why Shopify’s default breadcrumbs functionality sucks, how it should work, and how to customise your store to work this way.

But first…

What are breadcrumbs? And why do they even matter?

Breadcrumbs are a navigational element used for accessing high tier pages within a hierarchical flow.

In a simple structure, this could be:

Home > About

But in a more complicated structure such as eCommerce, this could be:

Dog > Dog Food > Dry Dog Food > Royal Canin Labrador Adult

This provides a useful way to navigate back to or up to previous pages within a hierarchy, without using the back button or going through complicated menus.

How do breadcrumbs work in Shopify?

Different themes function in slightly different ways, but on a product level, Shopify uses data from the URL to power the collection.

If you visit a product now, you’ll likely see a breadcrumb structure similar to:

Collections > Dog Food > Taste of the Wild High Prairie Grain-Free Dry Dog Food

Not bad. BUT if you were to check the URL, it’d say something like:

/collections/dog-food/products/taste-of-the-wild-high-prairie

Which brings us to…

The problem with breadcrumbs in Shopify

Shopify collects information from the URL to display in the breadcrumb, this creates a major issue.

Product pages are default accessed via multiple URLs to change the breadcrumb. One product like the previous “Taste Of The Wild High Prairie” example could be:

/collections/dog-food/products/taste-of-the-wild-high-prairie
/collections/dry-dog-food/products/taste-of-the-wild-high-prairie
/collections/taste-of-the-wild/products/taste-of-the-wild-high-prairie
/collections/best-sellers/products/taste-of-the-wild-high-prairie

This is not only confusing for your customers, it’s also awful for SEO. This creates additional wasted crawl budget, duplicate indexed pages, and less effective overall internal linking.

The good news is this is an easy fix, but this then breaks your breadcrumbs. Thankfully, there’s some ways to fix this, let’s get into them.

Why breadcrumbs matter for SEO

A key part of technical SEO is accessibility of pages. How many clicks does it take to get from one page to another?

Breadcrumbs are a navigational element able to provide extensive internal links to prioritised pages on your website.

Ultimately, breadcrumbs work on a hierarchical linking structure. You link up to categories a product is in.

Considering in the vast majority of cases, categories (i.e. collections in Shopify) are the highest opportunity pages for SEO, this is highly effective as it can potentially create thousands of internal links to your collections, depending on the number of products.

In short, it supports internal linking and therefore ranking your collections.

How breadcrumbs should be structured in eCommerce

At this point, you know why breadcrumbs are important and you know how Shopify manages them. But how should they be set up?

There’s two ways to structure them:

1. History based breadcrumbs (don’t do this)

History based breadcrumbs are dynamic based on the path you took to navigate to this page.

This can either pass additional information via the URL, such as how Shopify works by default. Or it can grab links from your history.

The downside of these approaches is they’re dynamic, whereas for SEO we want a clear structure and hierarchy of how this page/product fits into your overall site structure.

2. Hierarchy structured breadcrumbs (do this!)

The optimal breadcrumb structure for Shopify (and eCommerce) stores is a hierarchical structure.

Hierarchical structures show the fixed hierarchy for this page within your overall site structure.

On a very simple store, this may look like:

Home > Products > Product Name

Or with a specific collection, it could be:

Home > Sofas > Product Name

But most likely, there will be different layers separating “Sofas” and the product, such as:

Sofas > Leather Sofas > Product Name

This provides SEO benefits via additional internal links, and a more user friendly experience. But how can you do this with Shopify?

How to add breadcrumbs to Shopify

Before we can customise your breadcrumbs structure, you need to make sure your theme supports breadcrumbs.

You can do this by:

Checking if your website is currently displaying breadcrumbs, if not;
Check if there are any theme settings to enable them

In the unlikely situation that your theme doesn’t have breadcrumb support built in, you should probably ask a developer to assist.

But here’s a sample code from Shopify documentation that you can add to <code>theme.liquid</code> to add breadcrumb support:

How to implement a hierarchy breadcrumb structure in Shopify

Now you’ve got breadcrumbs enabled, let’s build this into a hierarchical structure and add additional layers into it.

There’s two ways we can do this:

1. Automatically build breadcrumbs based on your main menu

Rather than manually building out a breadcrumb structure, you’ve probably already thought this through with your main menu structure.

If your menu already has “Leather Sofas” as a child of the “Sofas” collection, then it’s possible to directly apply this powered by your menu.

To do this, I’d strongly recommend working with a developer as it’s quite easy to mess this up.

But if it’s something you’d like to do, you can find an example code here.

(Someone else wrote this, so please don’t send us support questions)

2. Manually build breadcrumbs with meta fields

If you’d like more control over your breadcrumbs and are willing to invest a considerable number of hours to build them, you can structure them manually with metafields.

You could create a custom metafield named <code>breadcrumb</code>, for example, which contains the collection handle you’d like to display, then show it with code like this:

This checks if <code>breadcrumb</code> is filled for any given product. If true, then show it as an internal link to the collection. Else, only Home > (Product Name) is displayed.

Note that this is a very barebones implementation. For best result, consult the original breadcrumbs snippet and reuse its CSS classes / Liquid structure.

The difficulty is applying this across hundreds or thousands of products. To do this, we suggest using an app called Matrixify, here’s how it would work:

Export a list of your Shopify products
Import them into our breadcrumb planning sheet
For each product, paste the URL of the collection you’d like to link to in the breadcrumb. You can save time here looking at the product type column to help you.
Use the export tab to download this as a CSV for importing into Matrixify and bulk updating all products.

Also don’t think you’re limited to a single layer here, you can add as many links to your breadcrumb as you like, just add additional metafields to hold them.

Again, I’d strongly recommend working with a developer to implement this.

Next Steps

Now you understand the importance of breadcrumbs and the different approaches to structuring them.

Next you need to decide which method of implementation best suits your website and business. Then work with a developer to implement this.

If you decide to go with the manual approach, you’ll want to prepare all the details before hiring a developer so you’re only paying them for development work, not creating a hierarchy and structure for your pages.