Breadcrumbs for products in multiple collections

Highlighted
Tourist
7 0 1

Hi all,

We have been having an issue with breadcrumbs since the site was launched.

Our products appear in multiple collections so, for some reason, the breadcrumbs on a product page always say "Home -> All Products -> Poduct" (See an example: https://www.firstmats.co.uk/products/choice-plush)

Is there any way to change the code so that it shows a certain collection, or the product type which then links to a collection? At the moment, the closest solution I can find it so get it to run a search function, so if the product type is "Rubber" then run a search for "Rubber" but i'm worried about issues with duplication caused by this.

Any ideas?

Here's my breadcrumb code

  <div class="breadHeader row">
    <div class="breadcrumbs">
      <a href="/">Home</a>
      <span>&rarr;</span>
      {%if collection%}
      <a href="{{collection.url}}">{{collection.title}}</a>
      <span>&rarr;</span>
      {%else%}
      <a href="/collections">All Products</a>
      <span>&rarr;</span>
      {%endif%}
      <p>{{product.title}}</p>
    </div>
  </div>

0 Likes
Highlighted
Shopify Expert
220 0 11

Hi 

I think the main question is what collection do you want to show up, if your products are in multiple collections. 

I think at the minute, by saying {% if collection %} you are looking to see if there is the collection object in scope, which I assume there isn't. 

If you do 

{% for collection in product.collections %}
   {{ collection.title }}
{% endfor %}

That prints off a list of all the collections your product is in. 

You could also do

 {{ product.collections[0].title }}

to get the first collection found. 

So it all depends on which collection you want to show if there are multiple ones. 

Hope that helps!

Pippa

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
1 Like
Tourist
7 0 1

Hi Pippa,

Thank you so much for the advice. I have managed to make something work following your guidance. I have set them to collections[1] which seems to do the trick. There are a couple of products showing sub-collections rather than the top level one but it is still much better than before.

0 Likes
Highlighted
Shopify Expert
220 0 11

Hi

That's great. That will be showing the second collection in the list a product is a part of. You should add a clause 

{% if product.collections[1] %}
      //Display collection name
{% else %}
     //Display the collection name product.collections[0]
{% endif %}



That will ensure if there is no second collection, the first one is shown. 

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
0 Likes
Highlighted
New Member
5 0 0

Hi there,

I noticed this thread and realised that it is very similar to a problem i'm facing with my page. I have changed the product.collections[x] to [2] instead and it seems to work on majority of my products. However, 2 products are not reflecting the same breadcrumb chain as the rest. May I know how I can fix this issue? Here is my breadcrumbs code:

<div class="breadcrumbs">
<a href="{{ routes.root_url }}" title="{{'collections.breadcrumbs.back_to_home' | t}}">{{'collections.breadcrumbs.home' | t }}</a>

{%- if template contains 'collection' -%}
<span class="breadcrumbs-sep">›</span>
{{- 'collections.breadcrumbs.collections' | t | link_to: routes.collections_url -}}
<span class="breadcrumbs-sep">›</span>

{%- if collection.handle -%}
{%- if collection.handle == 'all' -%}
{{- 'collections.breadcrumbs.default_collection' | t -}}
{%- else -%}
{{- collection.title -}}
{%- endif -%}
{%- endif -%}
{%- endif -%}

{%- if template contains 'product' -%}
<span class="breadcrumbs-sep">›</span>


{%- assign first_collection = product.collections[2] -%}
{%- if first_collection.handle != blank -%}
{{- first_collection.title | link_to: first_collection.url -}}
<span class="breadcrumbs-sep">›</span>
{%- endif -%}


{%- if product.handle -%}
<span>{{ product.title }}</span>
{%- endif -%}
{%- endif -%}

</div>

Appreciate your help on this. Thanks!  

0 Likes