Theme development ·
Shopify breadcrumbs: why your product pages need them
Shoppers from ads land on one product page with no way back to the collection. Why breadcrumbs matter for navigation and Google, and how to add them in Shopify.
By Nikita Ahapov · Updated
Your Black Friday ads send people to one product. What if it is not the one they want?
A shopper lands on a product page from an ad, decides it is not quite right, and looks for similar products. Without breadcrumbs there is no obvious way back to the collection. On a phone, the menu is behind a tap and the back button takes them to Instagram. So they leave.
What breadcrumbs do
A breadcrumb is the small trail above the product title, for example Home, Mens, Footwear. It does two jobs.
- It helps shoppers move around. Baymard’s testing found that the most common use of breadcrumbs was to return to the category the user came from. They call hierarchy breadcrumbs hugely important for search, promotions and other non linear paths, which is exactly where ad traffic lands. (Baymard)
- It helps Google understand your store. Google uses breadcrumb markup to understand where a page sits in your site hierarchy and to categorise it in search results. (Google Search Central)
The bigger your catalogue, the more this matters. A store with a few dozen products can get away without them. A store with hundreds cannot.
Does your theme have them?
Open the theme editor, go to a product page template and look for a breadcrumb setting or block. Some Shopify themes include one. Shopify’s own free Dawn theme does not, so many stores built on it have none.
Then check it the way your shoppers do. Open a product page on your phone and try to get back to its collection in one tap.
How to add them properly
If your theme has no setting, adding breadcrumbs is a small development task. Three things to get right:
- Pick the collection for every product. A shopper who lands from an ad arrives on a product URL with no collection in it, so the theme has to decide which collection to show. I store that choice per product in a metafield, with a sensible fallback, so the trail is never empty.
- Add the structured data. Output BreadcrumbList markup that matches the visible trail, so Google reads the same path the shopper sees.
- Design it for thumbs. On mobile the trail should be one line, easy to tap, and never pushed below the product images.
Baymard also recommends a separate “Back to results” link for shoppers who came from search or a filtered collection, because a hierarchy link drops their filters.
Before BFCM
This is one of the smallest changes with the widest reach: every product page gets it at once. If you want it in before Black Friday, tell me which theme you run and I will give you a fixed price. More of my theme work is on the work page.