liquify.

How to add breadcrumbs to Shopify product pages

Breadcrumbs show shoppers where they are, like Home / Mugs / Stoneware Mug, and give them a one-tap way back to the collection.

Few free themes include them, but they take only a few lines of Liquid.

1. Check your theme

  1. Go to Online Store > Themes > Customize, open a product page, and look in the product section for a Breadcrumbs or Show breadcrumbs setting.
  2. If there isn't one (Dawn has none), add them with the snippet below.

2. Add breadcrumbs with a snippet

  1. In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
  2. Create a snippet called breadcrumbs.liquid with the code below.
  3. In the main product section, render it just above the product title with {% render 'breadcrumbs' %}.
  4. Style it small and subtle so it doesn't compete with the product title.
snippets/breadcrumbs.liquid
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <a href="{{ routes.root_url }}">Home</a>
  {%- if collection -%}
    <span aria-hidden="true"> / </span>
    <a href="{{ collection.url }}">{{ collection.title }}</a>
  {%- endif -%}
  <span aria-hidden="true"> / </span>
  <span aria-current="page">{{ product.title }}</span>
</nav>

The collection only shows when the shopper arrived from a collection page.

3. Or ask Liquify in one sentence

Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.

“Add breadcrumbs above the product title on product pages”

Try it free on a sample store

Free plan, no credit card. Connect a real store whenever you're ready.

Questions

Do breadcrumbs help SEO on Shopify?

They help search engines understand how your pages are organized, and they help shoppers move around, which is good for both.

More guides