A merchant updates their product page so the header stays fixed while customers scroll. The header looks cleaner, the cart is always visible, and the menu is easier to reach. Then a small layout problem appears: the breadcrumb trail is partly hidden under the header, squeezed too close to the product title, or floating in a place that no longer feels connected to the page.
For Shopify breadcrumbs with a sticky header, the goal is simple: keep the breadcrumb visible enough to orient shoppers, but give it enough top spacing so it does not collide with the fixed header, announcement bar, collection title, product title, or mobile menu. The best placement is usually below the sticky header and above the main page heading, with spacing adjusted separately for product, collection, and mobile layouts.
Why Sticky Headers Change Breadcrumb Placement
A normal header sits in the document flow. When the page loads, the content starts below it. A sticky or fixed header behaves differently. It may stay attached to the top of the screen, shrink on scroll, stack with an announcement bar, or cover the first part of the page content if the theme does not reserve enough vertical space.
That matters because breadcrumbs usually live near the top of the page. On a product page, they may sit above the product title. On a collection page, they may sit above the collection heading. On a blog article, they may sit above the article title. If the sticky header overlaps that area, the breadcrumb becomes a layout problem instead of a navigation helper.
Good breadcrumb placement is not only about adding the trail. It is about making the trail feel like part of the page hierarchy. If your store also has complex collection paths, review the broader setup in this guide to Shopify breadcrumb best practices by page type before adjusting spacing.
The Simple Rule: Header First, Breadcrumb Second, Page Context Third
When a Shopify theme uses a sticky header, the visual order should stay predictable:
- Sticky header: global navigation, search, cart, account, and sometimes announcement bar.
- Breadcrumb: lightweight location context, usually one line.
- Page context: product title, collection title, blog title, or page heading.
If the breadcrumb appears above the sticky header, it may scroll away before helping the shopper. If it appears too close to the title, it can look like a product meta field rather than navigation. If it appears inside the sticky header, it can make the header too tall and visually crowded.
Sticky Header QA Table for Shopify Breadcrumbs
Use this table as a quick review before publishing a theme change. It is intentionally practical, because most sticky header issues show up only after you test real product and collection pages.
| Area to check | What can go wrong | Better pattern |
|---|---|---|
| Initial page load | The sticky header covers the breadcrumb or pushes it too close to the first heading. | Add enough top spacing below the header so the breadcrumb has breathing room. |
| Scroll behavior | The header shrinks or changes height, causing the breadcrumb area to jump. | Test both top-of-page and after-scroll states before deciding spacing. |
| Product page | The breadcrumb is detached from the product title or placed inside the gallery area. | Place it near the product title or above the product content area, depending on the theme layout. |
| Collection page | The breadcrumb overlaps the collection banner, image, or title. | Keep it above the collection heading or within a clean wrapper below the header. |
| Mobile | The breadcrumb wraps into too many lines or sits under the sticky mobile header. | Use a compact mobile layout with safe spacing and horizontal scrolling when appropriate. |
| Schema alignment | The visible breadcrumb path and BreadcrumbList schema do not match. | Keep the visible path and structured data consistent, especially after moving blocks. |
Product Page Placement: Keep Breadcrumbs Close to the Title
Product pages are usually where sticky header issues are most noticeable. Many Shopify product templates have a media gallery on the left and a product information column on the right. If the product information column is sticky, the breadcrumb must be placed carefully so it does not feel disconnected from the title, price, variant picker, and add-to-cart button.
A good product page breadcrumb often appears above the product title, not above the entire product section. This gives shoppers a quick way to backtrack from a product to its parent collection without forcing them to scroll back to the top. It also helps direct product traffic from ads, email, search, or social understand where the item belongs in the catalog.
However, avoid placing breadcrumbs so high that the sticky header covers them. Also avoid placing them between core buying controls, such as between the price and variant selector. Breadcrumbs are orientation, not a purchase step. If you are working with a sticky product information column specifically, the related guide on breadcrumb placement near sticky product info goes deeper into that product page pattern.
Collection Page Placement: Do Not Fight the Banner
Collection pages often have a hero banner, collection image, heading, description, filter bar, or sort dropdown. A sticky header can make this area feel tight. The breadcrumb should not compete with the collection title or blend into the filter controls.
For most Shopify collection pages, place the breadcrumb below the sticky header and above the collection heading. If the theme uses a large image banner, place the breadcrumb either above the banner in a neutral wrapper or inside the banner only if contrast and spacing are very clear. Do not let it sit halfway under the header or overlap the image text.
Collection breadcrumbs are especially useful when your store has parent and child collections, such as Home > Furniture > Dining Chairs. If your collection hierarchy changes often, keep a recurring review process like the one in the Shopify breadcrumbs maintenance calendar.
Blog and Article Pages: Keep the Trail Subtle
Blog breadcrumbs do not need to be as prominent as product breadcrumbs. A shopper reading an article may only need a simple path such as Home > Blog > Article Title. The sticky header should not hide this path, but the breadcrumb should also not dominate the article title.
For blog posts, keep spacing calm and predictable. The breadcrumb can sit above the article title with a smaller font size than the heading. If your sticky header includes a large announcement bar, test the article page after the announcement bar is enabled, not only in the default theme preview.
Mobile Sticky Headers Need Their Own Breadcrumb Rules
Mobile is where sticky header and breadcrumb spacing issues become obvious. A desktop breadcrumb trail may fit in one line, but on mobile it can wrap into two or three lines. If the mobile header is sticky, those extra lines can push the product title too far down or make the top of the page feel crowded.
For mobile Shopify breadcrumbs, consider these rules:
- Use shorter labels: avoid long collection names where possible.
- Allow horizontal scrolling: this can be cleaner than wrapping into several lines.
- Keep enough top padding: the breadcrumb should not sit under the sticky mobile header.
- Check tap targets: breadcrumb links should be easy to tap without touching nearby controls.
- Hide the product name when needed: on small screens, the product title may already be visible directly below the breadcrumb.
The mobile version does not need to look identical to desktop. It needs to preserve orientation without stealing space from the product title, collection title, or primary actions.
Spacing Guidelines That Usually Work
Exact spacing depends on the theme, header height, announcement bar, font size, and template layout. Still, these practical guidelines help during review:
- Leave visual separation from the header: the breadcrumb should not touch the header shadow, border, or bottom edge.
- Keep it closer to the page title than to the header: this makes it feel connected to the page content.
- Use consistent spacing across templates: product, collection, and article pages should feel related.
- Avoid excessive top margin: too much space makes the first page content feel delayed, especially on mobile.
- Test with announcement bars on and off: sticky header height can change when a promo bar is active.
Do not treat spacing as a one-time desktop decision. Test the loaded page, the scrolled page, and the mobile page. Many overlap issues only appear after the header changes height during scroll.
Common Sticky Header Breadcrumb Mistakes
1. Placing breadcrumbs inside the sticky header
This can work for a very simple store, but it often makes the header too busy. On mobile, it can also make the sticky area too tall. Keep breadcrumbs in the page content unless there is a strong reason to include them inside the header.
2. Adding top padding only on product pages
Many stores fix product pages first and forget collection or blog pages. If the sticky header is global, check all major page templates. A clean product page does not help if collection breadcrumbs overlap the banner.
3. Ignoring the announcement bar
A sticky announcement bar can change the effective header height. If you run seasonal promotions, test breadcrumbs with the bar enabled. This is one of the most common reasons breadcrumbs look fine during setup but break during campaigns.
4. Matching schema but not the visible path
Moving the visual breadcrumb block should not create a mismatch with BreadcrumbList structured data. If you change the visible path, review the structured data too. For setup notes, theme blocks, JSON-LD, and BreadcrumbList behavior, use the Breadcrumbs & Categories documentation as a reference point.
Implementation Options for Shopify Merchants
There are three common ways to handle breadcrumbs when your theme has a sticky header.
Native theme breadcrumbs
This is the simplest route if your theme already supports breadcrumbs and gives you enough layout controls. The limitation is that some themes place breadcrumbs in a fixed location that may not work well with sticky headers.
Custom theme adjustments
A developer can adjust the breadcrumb wrapper, spacing, and template placement. This gives more control, but it also means you need to retest after theme updates, new templates, or announcement bar changes.
App-based setup
For merchants who want a managed breadcrumb and collection hierarchy setup without editing every template manually, Breadcrumbs & Categories can be a practical option. It is most helpful when you need product paths, collection hierarchy, subcategory navigation, mobile-aware display settings, and BreadcrumbList schema to stay easier to maintain across templates.
Sticky Header Breadcrumb QA Checklist
Before publishing a theme update, check these items on desktop and mobile:
- Does the breadcrumb appear below the sticky header on initial page load?
- Does the header overlap the breadcrumb after scrolling down and back up?
- Is the breadcrumb visually closer to the page title than to unrelated header elements?
- Does the product page breadcrumb sit near the product title without interrupting buying controls?
- Does the collection page breadcrumb avoid overlapping banners, descriptions, filters, and sort controls?
- Does the mobile breadcrumb avoid excessive wrapping or hidden text?
- Are breadcrumb links easy to tap on mobile?
- Does the visible breadcrumb path match the BreadcrumbList schema?
- Have you tested with announcement bars, sale banners, and campaign headers enabled?
- Have you checked at least one product, one collection, one article, and one static page?
Developer Handoff Notes
If you are handing this issue to a theme developer or agency, give them examples instead of a vague request. Share:
- The theme name and whether the header is sticky, fixed, shrinking, or paired with an announcement bar.
- One product page where the breadcrumb overlaps or feels cramped.
- One collection page with a banner or filter layout.
- One mobile screenshot showing the sticky header and breadcrumb together.
- The expected placement, such as “below sticky header, above product title, with consistent spacing.”
- Whether the visible breadcrumb and BreadcrumbList schema should use the same path.
This makes the fix easier to review and helps avoid changing the wrong template or only solving the desktop version.
Conclusion
Shopify breadcrumbs with sticky headers need layout care, not just a breadcrumb feature toggle. The breadcrumb should sit below the sticky header, stay visually connected to the page title, work on mobile, and avoid overlap with banners, filters, product media, and buying controls.
If your store uses a sticky header, review product, collection, blog, and mobile templates together. A small spacing adjustment can make breadcrumbs feel native to the theme instead of pasted on top of it. For merchants who want to manage breadcrumb paths and collection hierarchy with less manual template work, Breadcrumbs & Categories is one practical route to consider after you have confirmed the right placement pattern for your theme.
