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>→</span>
{%if collection%}
<a href="{{collection.url}}">{{collection.title}}</a>
<span>→</span>
{%else%}
<a href="/collections">All Products</a>
<span>→</span>
{%endif%}
<p>{{product.title}}</p>
</div>
</div>
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
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.
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.
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!
User | Count |
---|---|
766 | |
142 | |
98 | |
63 | |
53 |