(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.

2 Likes