How can I display collection names in Brooklyn theme breadcrumbs?

[Zebgoo]

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?

[r8r]

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

[Zebgoo]

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!

 

[r8r]

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

[r8r]

@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

[JanneR]

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">&rsaquo;</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">&rsaquo;</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">&rsaquo;</span>
              <a href="{{ gclink.url }}" title="{{ gclink.title | escape }} ">
              {{ gclink.title | escape }} 
              </a>
            {% endif %}
          {%- endfor -%}
        {% endif %}
      {%- endfor -%}
    {% endif %}
  {%- endfor -%}
  <span aria-hidden="true">&rsaquo;</span>
              <a href="/{{ collection.url }}/{{ product.url }}" title="{{ product.title | escape }} ">
              {{ product.title | escape }}
              </a>
</nav>
{%- endunless -%}

[r8r]

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 …