How can I display the full breadcrumb path on my product page?

Topic summary

A Shopify store owner wants to modify their product page breadcrumb navigation to display the complete menu hierarchy. Currently, breadcrumbs show only “Home / Product Name,” but they need “Home / Menu Item Name / Sub-menu Item Name / Product Name.”

Current Status:

  • The user shared their breadcrumb-nav.liquid code file
  • A helper (SideNode) offered a code solution to modify the Liquid template
  • The proposed solution did not work—no changes appeared in the breadcrumb path

Next Steps:

  • SideNode requested backend access to review the code and perform necessary checks
  • The original poster is uncertain how to grant backend access or enable the required checks

The issue remains unresolved, with the discussion stalled on providing access for troubleshooting. Note: Parts of the code snippets in the conversation appear corrupted or reversed, which may indicate formatting issues in the original thread.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.

Hi there ,

How to make the full path of the breadcrumb to appear in the product page , Right now the breadcrumb is

Home / productname / [IT IS SHOWN BELOW THE PRODUCT] . I want the breadcrumb to appear as

Home / Menu Item Name / Sub-menu Item Name / productname . Is there any way to do this .

THANK YOU in advance .

Site url :: https://awa34dg607eq6a2x-71493648693.shopifypreview.com

I am sharing the code for breadcrumb-nav.liquid

<nav role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="/">{{ 'general.back_to_home_label' | t }}</a>
    </li>
    {%- case t -%}
    {%- when 'page' -%}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
    </li>
    {%- when 'product' -%}
    {%- if collection.url -%}
    <li class="breadcrumbs__item">
      {{ collection.title | link_to: collection.url }}
    </li>
    {%- endif -%}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
    </li>
    {%- when 'collection' and collection.handle -%}
    {%- if current_tags -%}
    <li class="breadcrumbs__item">
      {{ collection.title | link_to: collection.url }}
    </li>
    <li class="breadcrumbs__item">
      {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
      <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
    </li>
    {%- else -%}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
    </li>
    {%- endif -%}
    {%- when 'blog' -%}
    {%- if current_tags -%}
    <li class="breadcrumbs__item">
      {{ blog.title | link_to: blog.url }}
    </li>
    <li class="breadcrumbs__item">
      {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
      <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
    </li>
    {%- else -%}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
    </li>
    {%- endif -%}
    {%- when 'article' -%}
    <li class="breadcrumbs__item">
      {{ blog.title | link_to: blog.url }}
    </li>
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
    </li>
    {%- when 'customers/addresses' -%}
    <li class="breadcrumbs__item">
      <a href="{{ routes.account_url }}">
        {{ 'customer.account.title' | t }}
      </a>
    </li>
    <li class="breadcrumbs__item">
      {{ 'Adresss' }}
    </li>
    {%- when 'customers/account' -%} 
    <li class="breadcrumbs__item">
       {{ 'customer.account.title' | t }}
    </li>
    {%- else -%}
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
    </li>
    {%- endcase -%}
  </ol>
</nav>

..

hi @Anonymous

you can try this code: it will be helpful to you
To modify your breadcrumb navigation to include the full path as “Home / Menu Item Name / Sub-menu Item Name / productname,” you’ll need to make some changes to your Liquid code. You can achieve this by updating the code that generates the breadcrumb links. Here’s a modified version of your breadcrumb-nav.liquid code:


If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

Hi,

It is not working. No changes in the path.

in order to proceed with the assessment, it is essential for me to review your code and perform the necessary checks on the backend.

I can share the required code but how to perform backend checks?