How can I add more breadcrumbs to my Focal Theme website?

Store Design
1

Hi, I am needing to add more breadcrumbs to my website. Right now, it only shows the Home Page and the page I am on.

Here is my website > collection> product

https://www.olivelle.com/products/barrel-aged-dark-balsamic-vinegar

But I would like for the breadcrumbs to show the whole path.

Thank you!!

2

Hi @Rikkipilewski ,

It is Shopify’s standard breadcrumbs, if you want to change this you can just install the app for it. You can refer to the following apps:

Hope it helps!

3

Hi @ Rikkipilewski

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

You can follow my code to show breadcrumbs

{% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %}

Home

{% if template contains ‘page’ %}

›

{{ page.title }}

{% elsif template contains ‘product’ %}

{% if collection.url %}

›

{{ collection.title | link_to: collection.url }}

{% endif %}

›

{{ product.title }}

{% elsif template contains ‘collection’ and collection.handle %}

›

{% if current_tags %}

{% capture url %}/collections/{{ collection.handle }}{% endcapture %}

{{ collection.title | link_to: url }}

›

{{ current_tags | join: " + " }}

{% else %}

{{ collection.title }}

{% endif %}

{% elsif template == ‘blog’ %}

›

{% if current_tags %}

{{ blog.title | link_to: blog.url }}

›

{{ current_tags | join: " + " }}

{% else %}

{{ blog.title }}

{% endif %}

{% elsif template == ‘article’ %}

›

{{ blog.title | link_to: blog.url }}

›

{{ article.title }}

{% else %}

›

{{ page_title }}

{% endif %}

{% endunless %}

Or you can share me file breadcrumb.liquid, so that I will check it and give you the code again

Hope my solution works perfectly for you!

Best regards,

PageFly

4

Did you manage to solve the issue? I have the same problem.

5

No :disappointed_face: I couldn’t make any coding work correctly and I am not wanting to download an app to fix it. If you figure something out please let me know!

6

I found a solution to this issue.

  1. everything is quite clearly written here https://www.codethatconverts.com/how-to-edit-breadcrumb-in-shopify/
  2. I recommend logging in and getting additional access to the update.

Then I add the short code below in to theme.css file as well for this issue:
.shopify-section–main-product .product{
margin-top:3.5em;
}
.breadcrumb {
display: none;
}

Using this method, for the breadcrumbs to work correctly, you need to create a main-menu in the navigation.This navigation will be referenced by this code script.

7

Hello,

being new to shopify, I find it hard to believe there is no better support for breadcrumbs. I went for a simple solution and added this code to main-product.liquid . Maybe someone else finds it useful.

<li class="breadcrumb__item">
  <a class="breadcrumb__link" href=""{{ routes.all_products_collection_url }}">{{ 'collection.general.all_products' | t }}</a>
</li>

{% if product.type %}
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="{{ routes.all_products_collection_url }}?filter.p.product_type={{ product.type | url_encode }}">{{ product.type }}</a>
    </li>
{% endif %}

So you get something like “Home / All Products / Wines / My red wind bottle“