(Squarespace) Product Custom Breadcrumb

Pro Tips Other Tips
1

By default, breadcrumbs in Squarespace product page will be like this: Shop > Product Name

image

In this post, I will show you how to add Category Name between, so it will be: Shop > Category Name > Product Name, like this

image
image750×157 5.78 KB

Let’s start!
#1. First, you need to edit each product > Additional Info > Add a Code Block with this code

image
image1135×538 29.8 KB

  <div class="ProductItem-nav-breadcrumb custom-breadcrumb" data-animation-role="content">
    <a href="/shop" class="ProductItem-nav-breadcrumb-link">Shop</a>
     <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/gratuity" class="ProductItem-nav-breadcrumb-link">Gratuity</a>
    <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/p/custom-dress" class="ProductItem-nav-breadcrumb-link">Custom Dress — Deposit</a>
  </div>

image
image767×502 47.9 KB

#2. Next, add this code to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb').appendTo('nav.ProductItem-nav');
});
</script>
<style>
nav.ProductItem-nav>div:not(.custom-breadcrumb) {
    display: none !important;
}
</style>

#3. Repeat #1 for all products. DO NOT REPEAT #2
Note: You can edit Category Name/URL and Product Name/URL

image
image1087×315 43.2 KB

Done.
If you any problems when installing this code, just comment below or send me a private message, I will help you.

4 Likes
2

Hello! Firstly, thank you so much for this custom breadcrumb code. I have been using it extensively on my site. Squarespace is now releasing V2 of their product pages and the CSS is changing. Here are their changes: Upcoming changes — Squarespace Developers

How should we update your code to remain functional through these changes?

Thank you.

1 Like
3

@user26679 When your site done upgrade to V2, you can change.
In step #2, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb').appendTo('nav.product-nav');
});
</script>
<style>
nav.product-nav>div:not(.custom-breadcrumb) {
    display: none !important;
}
</style>

and make sure you enabled this option.

image
image313×484 18 KB

If it still doesn’t work, you can share link to a product on your site, I will check again.

If you want a simpler, automatic way without having to insert Code Block into each Product, I also provide a solution, just insert the code once into Footer Injection, no need to edit the product, no need to do anything else, but it is paid code.

2 Likes
4

Ah, thank you! Your help set me on the right path. I had to enable Product Navigation > Breadcrumbs, otherwise Squarespace wouldn’t include the needed class=“product-nav” within the code.

However, this appended my custom breadcrumbs to appear after Squarespace’s generated breadcrumbs. I had to use the following code to find class=“product-nav” and replace it with my custom breadcrumbs instead of appending to it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var $customBreadcrumb = $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb');

    if ($customBreadcrumb.length > 0) {
        var $navContainer = $('nav.product-nav');

        if ($navContainer.length > 0) {
            $navContainer.html($customBreadcrumb);
        }
    }
});
</script>

The Squarespace generated breadcrumbs appear for a fraction of a second, but are replaced as soon as the footer code is loaded.
Example: Black Coffee Mug | Black Coffee Mugs for Metalheads

1 Like