Breadcrumbs (Home > "Collection" > "Product")

Highlighted
Tourist
3 0 1

Hi Guys,

I cannot seem to get the breadcrumb on my site to work as described in my Title where it will display as Home > Collection > Product. 

It will only show up that way if i click on the product from a collection page. If i were to access the same product through a search or directly from my homepage, it will be displayed as Home > Product. 

Here's the code from my breadcrumb.liquid:

{% comment %}
  Documentation - http://docs.shopify.com/support/your-website/navigation/creating-a-breadcrumb-navigation
{% endcomment %}

{% unless template == 'index' %}
    <nav class="breadcrumbs {% unless settings.show_product_breadcrumb %}breadcrumbs-empty{% endunless %}">
      
        <a href="/" title="Back to the frontpage">{{ linklists.main-menu.links.first.title }}</a>
        {% if template contains 'product' %}
          {% if collection %}            
            <span class="divider">&rsaquo;</span> 
            {% if collection.handle %}
              {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
              {{ collection.title | link_to: url }}
            {% endif %}
          {% endif %}

          <span class="divider">&rsaquo;</span>
          <span>{{ product.title }}</span>
        
        {% elsif template contains 'collection' and collection.handle %}
          {% if current_tags %}
            <span class="divider">&rsaquo;</span>
            {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
            {{ collection.title | link_to: url }}
          {% else %}
            <span class="divider">&rsaquo;</span>
            <span>{{ collection.title | capitalize }}</span>
          {% endif %}
      
        {% elsif template == 'article' %}
          <span class="divider">&rsaquo;</span> 
          {{ blog.title | link_to: blog.url }}
          <span class="divider">&rsaquo;</span>
          <span>{{ article.title }}</span>
      
        {% elsif template contains 'page' %}
          <span class="divider">&rsaquo;</span>
          <span>{{ page.title }}</span>
      
        {% else %}
          <span class="divider">&rsaquo;</span>
          <span>{{ page_title }}</span>
        {% endif %}
      
    </nav>
{% endunless %}

Thanks in advance for any help!

1 Like
Highlighted
Astronaut
1890 1 431

The code in breadcrumb.liquid is fine; you don't need to worry about that.

Take a look at the URL in both of the cases you mentioned.  You'll notice that in the first case, you'll see "/collections/collection-handle" in the URL.  But you don't see that in the second case.  In the first case, you are viewing the product within a collection.  In the second case, there is no associated collection.

Remember that each product can be assigned to multiple collections; each product is not limited to only one collection.  When you click on a product that is on your homepage or on the search results page, it doesn't know within which collection you want to view the product.  So instead, it views the product by itself and not within any collection.

I hope you now understand why the breadcrumbs are behaving the way that they are.

We can make some modifications to link the products to one of their collections.  If you think you can do this yourself, take a look at the within filter.  Otherwise, let me know what theme you're using.

0 Likes
Highlighted
Tourist
3 0 1

Thanks Alex, for the detailed explaination. The URLs are exacty the way you described them to be. 

I am currently using the Megatron Shopify theme. 

Are you able to help me with this?

0 Likes
Highlighted
Astronaut
1890 1 431

I don't have access to that theme, so I won't be able to help too much.

Here's an example using the Brooklyn theme.

Open Snippets/product-grid-item.liquid.  You'll find the code that creates the link to the product.

      <a class="grid-product__image-link" href="{{ product.url | within: collection }}">

In this case, I would change it to:

      {% if collection %}
        {% assign current_collection = collection %}
      {% else %}
        {% assign current_collection = product.collections.first %}
      {% endif %}
      <a class="grid-product__image-link" href="{{ product.url | within: current_collection }}">

What this means is:  If we are in a collection page and click on a product, proceed as normal.  If we are not in a collection page (e.g. on the homepage or search results page), let's use this product's first collection.

0 Likes
Highlighted
Excursionist
50 0 3

How to get menu name in breadcrumb in shopify. Now in Breadcrumb it is coming like home>> collection name >> product name . But i need breadcrumb like that Home>> main_menu name >>  collection name >> product name . i worked on code like this <span class="divider" aria-hidden="true"> >> {{main_menu.link}} </span>.Buts its not working.Can you please tell how to write code for this.

0 Likes