Liquid, JavaScript, themes, sales channels
Hello, I'm using the Brooklyn theme and I just implemented breadcrumbs in my code as the shopify tutorial shows it. But the problem is that on my page it shows Home>Product but the product is in a collection and I would like that the specific collection shows in the breadcrumbs like Home>Collection1>Product1.
Could you help me please?
Hi @Zebgoo
you're talking about the scenario, where you're on a product detail page, correct? Have you seen this implemented before?
The main issue with this logic is, that Shopify cannot really provide a 1:1 collection-context on the products detail page. The reason is, that a product could be listed in 0…n different collections. How would the breadcrumbs know, which one to display in the breadcrumb-list?
I hope this helps!
Mario
Sure I got the problem of which collection the breadcrumbs must choose, but is there a way I could define the specific collection for it? How others websites like walmart on the photo or many ohers have done it?
Thanks!
Alright – let me rephrase that … Have you seen this implemented in Shopify before? XD🙂
Of course this breadcrumb logic can be implemented, if there is a hierarchical context for the taxonomy available on the product page. I don't see how this could be done reliably in Shopify.
Mario
@Zebgoo i was referring to native Shopify – of course one could implement their own logic, where you manually set the "main" collection for each product (for instance as a meta field).
Mario
Depending on the implementation, the main navigation can be easily used to create a breadcrumb.
Here's an example from our store. I can't remember where I found the solution originally.
{%- unless template == 'index' or template == 'cart' -%}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<a href="/" title="Koti" rel="">Koti</a>
{% for link in linklists.main-menu.links %}
{% if link.child_active or link.active %}
<span aria-hidden="true">›</span>
<a href="{{ link.url }}" title="{{ gclink.title | escape }} ">
{{ link.title | escape }}
</a>
{% for clink in link.links %}
{% if clink.child_active or clink.active %}
<span aria-hidden="true">›</span>
<a href="{{ clink.url }}" title="{{ gclink.title | escape }} ">
{{ clink.title | escape }}
</a>
{% for gclink in clink.links %}
{% if gclink.child_active or gclink.active %}
<span aria-hidden="true">›</span>
<a href="{{ gclink.url }}" title="{{ gclink.title | escape }} ">
{{ gclink.title | escape }}
</a>
{% endif %}
{%- endfor -%}
{% endif %}
{%- endfor -%}
{% endif %}
{%- endfor -%}
<span aria-hidden="true">›</span>
<a href="/{{ collection.url }}/{{ product.url }}" title="{{ product.title | escape }} ">
{{ product.title | escape }}
</a>
</nav>
{%- endunless -%}
That would be one way to go about it, however, the OP was talking about the collection context – that doesn't necessarily go along the lines of how the navigation is configured …
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024