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

Store Design

Topic summary

A user wants to display the full navigation path in breadcrumbs on their Focal Theme Shopify store, rather than just showing Home → Current Page. Currently, the breadcrumb trail doesn’t include intermediate collection pages.

Proposed Solutions:

  • Third-party apps: Install breadcrumb apps from the Shopify App Store (Category Breadcrumbs Uncomplicated, Schema Breadcrumbs)
  • Custom code implementations: Multiple code snippets were shared:
    • A comprehensive Liquid template covering products, collections, blogs, and articles
    • CSS modifications to hide default breadcrumbs and adjust spacing
    • A simpler solution adding product type to the breadcrumb path (Home → All Products → Product Type → Product)

Key Requirements:

For code solutions to work properly, users need to create a main-menu in navigation that the breadcrumb script can reference.

Status:

The original poster hasn’t successfully implemented any solution and prefers avoiding apps. Another user reported success using a tutorial from codethatconverts.com combined with custom CSS. The discussion remains open with working solutions available but not yet adopted by the original poster.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
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!!

1 Like
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“