Breadcrumbs problem

Zebgoo
Tourist
5 0 0

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?

0 Likes
r8r
Shopify Expert
1478 162 488

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
Zebgoo
Tourist
5 0 0

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!

IMG_20210107_205218.jpg

0 Likes
r8r
Shopify Expert
1478 162 488

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
r8r
Shopify Expert
1478 162 488

@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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
JanneR
New Member
1 0 0

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 -%}

 

0 Likes
r8r
Shopify Expert
1478 162 488

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 …

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes