Why aren't categories showing in my breadcrumbs?

Solved

Why aren't categories showing in my breadcrumbs?

JonoCES
Shopify Partner
12 1 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!

Accepted Solution (1)
JonoCES
Shopify Partner
12 1 1

This is an accepted solution.

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. 

View solution in original post

Replies 2 (2)

JonoCES
Shopify Partner
12 1 1

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 -%}
   <li class="breadcrumbs__item" href="{{ collection.url }}" aria-current="page">
      {{ collection.title | link_to: collection.url | within: collection }}
   </li>
 {%- endif -%}
   <li class="breadcrumbs__item">
     <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">
        {{ product.title | within: collection }}
     </a>
   </li>

 

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

JonoCES
Shopify Partner
12 1 1

This is an accepted solution.

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.