Add Breadcrumbs to Product Page - Prestige Theme

Technical Q&A

Topic summary

Users are attempting to add breadcrumb navigation to product pages in Shopify’s Prestige theme, which natively includes breadcrumbs only on collection pages.

Main Issue:
When products belong to multiple collections, the breadcrumb displays a blank space instead of the collection name (e.g., “Home / Shop / / Product”).

Solution Provided:
PageFly-Oliver shared updated code that successfully resolves the blank space issue. The original poster confirmed it works perfectly.

Ongoing Challenges:

  • Positioning: One user reports breadcrumbs appearing in front of product images rather than above them
  • Collection Logic: The code displays “Best selling products” collection, which redirects to an unintended page with all products in a strange order. User seeks a way to show the last-visited collection instead
  • Mobile Compatibility: Another user reports the code hides all product page content (images, text, buy buttons) on mobile devices
  • Implementation Questions: Multiple users are asking where exactly to paste the code in their theme files

The discussion remains open with several unresolved technical issues around positioning, collection selection logic, and responsive design.

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

Hi guys,

I’m using the Prestige theme on my website. The theme has breadcrumbs on category pages, but not product pages. I added a piece of code to the main-product.liquid file that displayed the breadcrumbs (please see the code below).

The problem is that the product belongs to a few categories. It apparently reates confusion for the code, so the breadcrumbs link skips the category name and shows just s blank space there in the format like:

Home / Shop / / Product

Wonder if there is a way I can define and display a category name in the breadcrumb?

The code I used for the product page:

<div class="breadcrumb">
    {%- capture collection_breadcrumb -%}
    <nav class="breadcrumb breadcrumb--floating" aria-label="{{ 'general.breadcrumb.label' | t | escape }}">
      <ol class="breadcrumb__list unstyled-list">
        <li class="breadcrumb__list-item">
          <a href="{{ routes.root_url }}" class="smallcaps {% unless show_image %}link-faded{% endunless %}">{{ 'general.breadcrumb.home' | t }}</a>
        </li>

        <li class="breadcrumb__list-item">
          <a href="{{ routes.all_products_collection_url }}" class="smallcaps {% unless show_image %}link-faded{% endunless %}">{{ 'general.breadcrumb.shop' | t }}</a>
        </li>

        <li class="breadcrumb__list-item">
          <a href="{{ collection.url }}" aria-current="page" class="smallcaps {% unless show_image %}link-faded{% endunless %}">{{ collection.title }}</a>
        </li>

        <li class="breadcrumb__list-item">
          <a href="{{ product.url }}" aria-current="page" class="smallcaps {% unless show_image %}link-faded{% endunless %}">{{ product.title }}</a>
        </li>
      </ol>
    </nav>
{%- endcapture -%}

  
 <collection-banner {% if section.settings.reveal %}reveal-on-scroll="true"{% endif %} class="collection-banner color-scheme color-scheme--{{ section.settings.color_scheme.id }}" {% if section.settings.allow_transparent_header %}allow-transparent-header{% endif %}>
    {%- unless section.settings.allow_transparent_header -%}
      {{- collection_breadcrumb -}}
    {%- endunless -%}
2

Hi @realina ,

You can try my code


    {%- capture collection_breadcrumb -%}
    
{%- endcapture -%}

  
 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly
1 Like
3

Works perfectly! Thanks a lot :+1:

4

Hi,

How can I add this to my: product-info.liquid ?

I want to display it above the title. Looking forward to your reply!

Thanks!

5

Hello there,

I would like to ask a few more details about this discussion.

I have the same desire and I would like to add breadcrumbs to my Product pages and not only the collections pages.

I have to main issues :

  • First, if i copy paste the code in this discussion this is how the breadcrumbs display on my product page :

Vic1208_0-1719823130639.png
Vic1208_0-1719823130639.png1693×759 146 KB

As you can see its a bit annoying because it appears in front of the picture and not on top of it… I don’t know how to tweak this to be sure the breadcrumbs appears on top.

  • Second problem is that as you can see, if I use the first code sent by Realina, I have the same issue with the blank space, but if I use the code sent by Oliver, I have the collection “Best selling products” but its not link to any collection I would like to use… So it redirect to a bugged collection with all my products in a strange order and everything…

How can i tweak this to make sure it redirect to the last collection customers visited for example ? Or something which make more sense I guess…

Any help would be appreciated !

Thanks,

Victor

6

Hi there,

where should i be pasting this code ?

7

Hi @PageFly-Oliver ! I just tried this and it works wonderfully on desktop - but when I view it on mobile it hides all of the info on the product page (image, all text, buy buttons…) :scream:

Do you have any ideas how I could make this work with mobile, as well (or what I’m doing wrong :slightly_smiling_face: )

8

Hi!

May i know which line was this code added? thanks! newbie here