Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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.
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
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.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025