Breadcrumbs needed Home > Pages > Collection > Product

[vortifytech1]

Hello Everyone!

I’m trying to build a dynamic breadcrumb navigation system in my Shopify store, but I can’t get it to work properly across all page levels.

Here’s what I want to achieve:

• When a user navigates from Home → Page, the breadcrumb should show:
  Home > Page

• When they go from that Page → Collection, it should show:
  Home > Page > Collection

• When they go further into a Product, it should show:
  Home > Page > Collection > Product

• And if the user goes back, it should update accordingly (for example, Product → Collection → Page).

Basically, I want breadcrumbs that follow the user’s navigation path dynamically, not just based on the current URL template.

I tried a Liquid-based setup From shopify but that gives me:

Home > pages

after the redirection from Page to Collection page it gives me

Home > Collection

it should gives me Home > Pages > Collection / currect page .

Have someone solution for this i need quick solution for this Kind of tracking Breadcrumbs.

[devcoders]

Hi @vortifytech1

Step-by-Step Solution

1. Add a Breadcrumb Container in Your Theme

In your desired layout (like sections/breadcrumb.liquid or directly in theme.liquid), add:

<nav class="dynamic-breadcrumbs" aria-label="Breadcrumb"></nav>

2. Add This JavaScript (can go in theme.liquid before </body>)

<script>
document.addEventListener('DOMContentLoaded', function() {
  const breadcrumbContainer = document.querySelector('.dynamic-breadcrumbs');
  if (!breadcrumbContainer) return;

  // Get current page info
  const pageTitle = document.title.replace('|', '').trim();
  const pageUrl = window.location.pathname;

  // Get stored breadcrumb trail
  let trail = JSON.parse(localStorage.getItem('breadcrumbTrail')) || [];

  // Check if current page is already in trail
  const existingIndex = trail.findIndex(item => item.url === pageUrl);
  if (existingIndex !== -1) {
    trail = trail.slice(0, existingIndex + 1);
  } else {
    trail.push({ title: pageTitle, url: pageUrl });
  }

  // Limit breadcrumb length (optional)
  if (trail.length > 5) trail = trail.slice(trail.length - 5);

  // Save updated trail
  localStorage.setItem('breadcrumbTrail', JSON.stringify(trail));

  // Render breadcrumbs
  let html = `<a href="/">Home</a>`;
  trail.forEach((item, index) => {
    html += ` <span>›</span> `;
    if (index === trail.length - 1) {
      html += `<span>${item.title}</span>`;
    } else {
      html += `<a href="${item.url}">${item.title}</a>`;
    }
  });
  breadcrumbContainer.innerHTML = html;
});
</script>

3. Style It (optional)

.dynamic-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
}
.dynamic-breadcrumbs a {
  color: var(--color-link, #000);
  text-decoration: none;
}
.dynamic-breadcrumbs span {
  color: #666;
}

[vortifytech1]

This not works. It gives me another page title.

[Tapita-support2]

Hi @vortifytech1,

That kind of dynamic breadcrumb (following the actual user navigation path instead of just URL hierarchy) isn’t natively supported in Shopify Liquid — it can only build static breadcrumbs based on the current template (e.g., collection → product).

If you want a smart, dynamic breadcrumb that updates as users move between pages, you can try our Tapita AI Sections & Blocks app. It’s a free Breadcrumb Section that automatically handles breadcrumbs across pages, and you can customize its design without touching any code.

View the breadcrumbs demo here.

Hope this helps you save time building it manually!

Sophia - The Tapita team