Section: Breadcrumbs

Everything you'll need to know on how to set up your Breadcrumbs section.

Breadcrumbs show visitors where they are in your site hierarchy and let them navigate back up the tree (e.g. Home → Shop → Men → Shirts). They're great for SEO (Google may show them in search results) and improve usability on deep category structures. The Cartiafy breadcrumbs section automatically generates the trail from the current URL and renders JSON-LD structured data for search engines.

Breadcrumbs are a site-wide section—already rendered automatically on every page that has a hierarchy (collections, products, articles, content pages). You won't find it in the Add section menu because it's pre-installed in the theme layout. It hides automatically on the home page and 404 page. To customize it, click the floating Breadcrumbs overlay in the page preview.

1) Open the theme editor and switch to a page that has a hierarchy — a product page or collection page works best. The home page won't show breadcrumbs.

2) Click the breadcrumb trail in the preview, or scroll the left sidebar and click the floating Breadcrumbs overlay. The right sidebar opens with all the settings.

3) Configure the fields below. Use the Show breadcrumbs toggle to hide the trail site-wide without losing your configuration.

Color scheme for the breadcrumbs. Pick from the schemes set up in Theme Settings → Colors.

Breadcrumbs are never shown on home page or 404. Master switch — untick to hide breadcrumbs across the entire site without removing the section. Default: on.

Optional: some prefer to hide them on cart. By default, breadcrumbs hide on the cart page to reduce clutter near checkout. Tick to show them on the cart page too. Default: off.

Recommended: Improves SEO and Rich Snippets. Outputs BreadcrumbList structured data that search engines use to display the navigation path in results. Default: on.

Space above the breadcrumbs (0–40 px). Default: 12.

Space below the breadcrumbs (0–40 px). Default: 12.

Margin below the breadcrumbs that pushes the next section away (0–60 px). Default: 24.

Horizontal space around the separator character (4–20 px). Default: 8.

Font size of the breadcrumb links (10–18 px). Default: 14.

Font weight of the current page label (the last item in the breadcrumb): Normal (400), Medium (500), Semibold (600), or Bold (700). Default: Medium. Heavier weights make the current page stand out from the linked items.

By design, breadcrumbs only show on pages with a hierarchy (collections, products, articles, pages). On the homepage there's no hierarchy to show. The section also intentionally hides on the 404 page.

The path is generated automatically from the current page's context. For products, it shows Home / Collection / Product if the visitor came from a collection. For articles, it shows Home / Blog / Article. The trail follows what Shopify exposes via Liquid objects.

Search engines like Google use BreadcrumbList structured data to display the navigation path in search results (e.g. yourstore.com › Shop › Men › Shirts) instead of just the URL. This makes results more clickable. Keep Enable JSON-LD Schema on for the SEO benefit.

The separator is a chevron (›) by design. To change it, you'd need to edit the section's Liquid file. Most themes use a chevron or slash for clarity — both are universally understood as breadcrumb separators.

The cart page has a dedicated toggle (Show on cart page). For other pages, breadcrumbs render based on the URL hierarchy — they auto-hide on the home page and 404. To hide on a specific page, untick the master Show breadcrumbs setting (which hides them site-wide), or use a per-template override.

By design — Breadcrumbs is a site-wide section rendered automatically by the theme layout, so it's already installed on every page that has a hierarchy. To configure it, open the theme editor on a product or collection page and click the breadcrumb trail in the preview (or the Breadcrumbs overlay in the sidebar).