Why aren't categories showing in my breadcrumbs?

Store Design
, , ,
1

Hi. I know this problem has been asked about on here before but I can’t seem to find a resolution to the issue. I’m trying to get breadcrumbs to work on product pages only. All products are always in a collection, but I can’t get the collection title into the breadcrumbs. I know this depends on how the user arrives at the product page, but I cna’t get it to work even when clicking on any product from any of the collection pages.

Here’s the code I’m using:

{% if template.name == 'product' %}
  <nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
    <ol class="breadcrumbs__list">
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="/">Home</a>
      </li>
      <li class="breadcrumbs__item">
        {{ collection.title | link_to: collection.url }}
      </li>
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
      </li>
    </ol>
  </nav>
{%- endif -%}

All of the shops products are in multiple collections, could that be causing it? I assumed it’s happening because on the collections edit pages I get this URL preview:

…myshopify.com/collections/cabinets

But when I’m on that page and click any product the URL switches out ‘collections’ for ‘products’, like so:

…myshopify.com/products/synergy-cabinet

Is there a way to force the retention of the ‘collections/collection-title’ part of the URL instead of ‘products’?

Any help with this would be great. Thanks!

2

I’ve managed to get the collection data into the breadcrumbs by using the within filter on the product url but it’s outputting as a URL. Is there any way to convert/filter that into separate words?

Here’s the code:

{%- if collection.url -%}
   - {{ collection.title | link_to: collection.url | within: collection }}
   

 {%- endif -%}
   - {{ product.title | within: collection }}

Which is outputting:

/collections/gt-arcade-machine-cabinetsGT Arcade Cabinets > /collections/gt-arcade-machine-cabinetsGT-60 Coffee Table Arcade Machine

Is there a way to filter that output into:

GT Arcade Cabinets > GT-60 Coffee Table Arcade Machine

3

I figured the problem out. I was including the snippet I created in the theme.liquid file instead of the main.product file. Now the original clode is working and I don’t need to include the with: collection filter.