Theme Stack Guide
Choose, customize, and get the most from Shopify themes

How do you add breadcrumb navigation to a Shopify theme?

Breadcrumb navigation shows the shopper's path through your catalog, like Home / Collections / Running Shoes / Product, so they can orient and backtrack without the browser back button. Many themes include breadcrumbs as a toggle in the theme editor. If yours does not, you can add them with a small snippet using Shopify's built-in breadcrumb object, or generate them from the collection hierarchy. The snippet route takes under an hour and needs no app.

Check your theme first

Open the theme editor, go to a product or collection template, and search the settings for breadcrumb. A surprising number of current themes ship with a breadcrumb toggle buried in the product template or the collection banner settings. If it is there, turn it on and style it in the theme's typography settings. This is the cleanest route because it uses the theme's own markup and styling, and it usually includes the structured data that search engines want.

While you are there, check the theme's documentation for the exact behavior: some themes show breadcrumbs only on product pages, some only on collections, and a few show them everywhere including pages where they add noise. Knowing the scope before you commit saves a round of cleanup later.

The snippet method with the breadcrumb object

Shopify's Liquid exposes a breadcrumb object on product and collection templates that returns the trail as structured data. Create a snippet, call it breadcrumbs, that loops over the trail and renders each step as a linked list item with the current page unlinked. Include it at the top of your product and collection templates, above the main content but below the header. The whole snippet is roughly twenty lines of Liquid and HTML.

Add the matching structured data while you are at it. Search engines use breadcrumb markup to understand your catalog hierarchy, and it can change how your pages appear in results, showing the trail under the title. The JSON-LD for breadcrumbs is a standard schema type, and adding it in the same snippet keeps the visible trail and the machine-readable trail in sync.

The collection-hierarchy method

The breadcrumb object reflects the path the shopper actually took, which means it can be inconsistent: the same product reached from search versus from a collection shows different trails. If you want stable breadcrumbs, build them from the product's primary collection instead. In the snippet, pick the product's first collection, or a metafield that names the canonical collection, and render Home / Collection / Product from that.

This method needs a decision about which collection is canonical for products that live in several. A metafield on the product naming the primary collection is the clean fix, and it doubles as documentation for whoever manages the catalog later. Without it, the first-collection fallback can produce odd trails for products added to collections in a strange order.

Styling and placement details

Breadcrumbs should be small, quiet, and above the fold of the content they describe. On product pages, the standard spot is just above the product title or just below the header. Keep the separator simple, a slash or chevron, and make every step except the current one a real link. The current page should be plain text, not a link to itself, which is both a usability convention and an accessibility requirement.

On mobile, long trails get awkward. The common pattern is to collapse the breadcrumb to just the parent link, like a back-to-collection link, on small screens. This keeps the orientation benefit without eating vertical space. Test it on a real phone, not just a resized desktop window, because touch targets and wrapping behave differently.

The verdict

Use the theme's built-in breadcrumb toggle if it exists, add a snippet with the breadcrumb object if it does not, and build from the collection hierarchy when you need stable trails. Keep them small, quiet, and honest about where the shopper is, and add the structured data in the same pass.

Frequently asked questions

Do breadcrumbs help a Shopify store's sales directly?

Indirectly. Breadcrumbs help a visitor who landed deep in a catalog get oriented and move up a level instead of leaving, and they give search engines a clean picture of your category structure. The effect shows up as better navigation depth, not a checkout spike, and that is enough to justify a few hours of work.

Where should breadcrumbs sit in a theme?

Above the page title or directly under the header, in small, quiet type, on product, collection, and blog pages. Not on the homepage, where there is nothing above to point to. Consistency matters more than styling: a breadcrumb that appears on some templates and vanishes on others teaches visitors to ignore it.

Should breadcrumbs show the collection the visitor came from?

That is the genuinely hard part on Shopify, because a product can live in many collections. Use the canonical path or the primary collection you merchandise the product under, and accept the simplification. A breadcrumb that guesses the visitor's exact route needs session logic most themes do not have, and a wrong guess is worse than a simple one.

Do breadcrumbs replace good menu navigation?

No. They are a supplement for deep landings, from search results and shared links, where the visitor never saw your menu. Menus serve browsers. Breadcrumbs serve arrivals. Stores with small catalogs can skip them entirely without loss, which is a fair test of whether you need them at all.