(Squarespace) Product Custom Breadcrumb

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


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

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

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

#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>
    $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb').appendTo('nav.ProductItem-nav');
nav.ProductItem-nav>div:not(.custom-breadcrumb) {
    display: none !important;

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

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