Changing Breadcrumb symbols.

Does anyone know how to change the breadcrub settings - if it possible? I could like the breadcrumbs to use the greater than symbol (  >  ) instead of the slash it is currently using. Thanks!

hi @jilldiane_ - did you ever figure this out?

14 hours ago, ColinB said:

hi @jilldiane_ - did you ever figure this out?

If you share link to a product on your site, we can give some code to change this.

thanks @tuanphan - well, this is weird. I just looked again and the greater than symbol IS used on product pages but NOT on others.

PASSWORD: golfballs

Here it is

https://encore-refresh.squarespace.com/shop/p/titleist-pro-v1-2021-recycled-golf-balls-4ek5x-pmzbx-p9et2-shgl9

but they're backslashes here:

https://encore-refresh.squarespace.com/shop/all-brands/srixon

On 11/14/2021 at 3:04 PM, ColinB said:

thanks @tuanphan - well, this is weird. I just looked again and the greater than symbol IS used on product pages but NOT on others.

 

PASSWORD: golfballs

Here it is

https://encore-refresh.squarespace.com/shop/p/titleist-pro-v1-2021-recycled-golf-balls-4ek5x-pmzbx-p9et2-shgl9

but they're backslashes here:

https://encore-refresh.squarespace.com/shop/all-brands/srixon

Add to Design > Custom CSS

.ProductItem-nav-breadcrumb-separator:after {
    content: "/" !important;
}

thanks @tuanphan but that hasn't made any difference. I don't see the ">" symbol in your code so how does your code change the backslashes "/" to greater-than symbols ">"?

Just to make it clear: I want ">" not "/" in my breadcrumbs.

You can change / in the code to >

On 11/18/2021 at 4:58 AM, ColinB said:

thanks @tuanphan but that hasn't made any difference. I don't see the ">" symbol in your code so how does your code change the backslashes "/" to greater-than symbols ">"?

 

Just to make it clear: I want ">" not "/" in my breadcrumbs.

Hey @ColinB not sure if this ever got resolved, but seems like you wanted to adjust the character separator on the nested categories not the product page.

This worked for me on 7.1:

.nested-category-breadcrumb span {
    display: none;
}
.nested-category-breadcrumb-link:after {
    content: " > " !important;

}
 

I would also like to add a different symbol to the breadcrumb menu but I'm using a section of code that forces the breadcrumbs to behave differently, can something be added to what I have to make a separation icon between links? I also need to make the font match my custom upload. 

www.thejanimalstore.com password Artist2023

here is all my code, the code concerning the breadcrumb adjustments is toward the bottom: 

@font-face {

    font-family: MrsEavesOT-Roman;

       src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf);

  }

h1 {font-family: MrsEavesOT-Roman;}
h2 {font-family: MrsEavesOT-Roman;}
h3 {font-family: MrsEavesOT-Roman;}
h4 {font-family: MrsEavesOT-Roman;}
p {font-family: MrsEavesOT-Roman;}
.header-title a {
  font-family: 'FontTitleHere' !important;
}
.header-nav-item a {
  font-family: MrsEavesOT-Roman !important;
}
time.summary-metadata-item.summary-metadata-item--date {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-title-link {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-read-more-link {
    font-family: MrsEavesOT-Roman !important;
}
.sqs-add-to-cart-button-inner {
  font-family: MrsEavesOT-Roman ;
}
.header--menu-open a {font-family: MrsEavesOT-Roman}
.collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status {
  font-family: MrsEavesOT-Roman !important;
}
.blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;}
.item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;}
.blog-item-title h1.entry-title {
    font-family: MrsEavesOT-Roman !important;
}
#siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element {
    font-family: MrsEavesOT-Roman !important;
}

a.nested-category-breadcrumb-link {
    font-family: MrsEavesOT-Roman !important;
}
/* Product Detail - Description */
section.product-details.ProductItem-details * {
    font-family: MrsEavesOT-Roman !important;
}

.collection-type-products .ProductItem-details .product-price,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children

  {
  
    font-family : MrsEavesOT-Roman;
    
    }
.newsletter-block .newsletter-form-header-title {
  font-family: MrsEavesOT-Roman !important;
}
/* Cart page custom font */
div#sqs-cart-container * {
    font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important;
}
/* Promotional popup custom font */
.sqs-popup-overlay-content * {
    font-family: MrsEavesOT-Roman !important;
}
// Newsletter Form Description //
.newsletter-block .newsletter-form-header-description p {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Fields //
.newsletter-block .newsletter-form-field-element {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Button //
.newsletter-block .newsletter-form-button {
  font-family: MrsEavesOT-Roman !important;
}

.variant-option * {
    font-family: MrsEavesOT-Roman !important;
}
// For the Form
.sqs-block-form .field-list .title,
.sqs-block-form .field-list .caption,
.form-wrapper .field-list .field .field-element,
.sqs-block-form .field-list select,
.form-wrapper .field-list textarea,
body:not(.button-style-default) .sqs-block-form .sqs-editable-button {
    font-family:  MrsEavesOT-Roman !important;
}
.form-wrapper .field-list .field .caption {
  font-family: MrsEavesOT-Roman;
  font-size: 9px;
  color: white;
  letter-spacing: .15em;
  text-transform: none;
}

.sqs-block-button-element {
box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); 
}

.sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary {
    box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75);
}

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F0A166!important; /* change the button background color */
  border: 2px solid #EF8345!important; /* change the button border */
  font-size: 1.2rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#4E7C72!important; /* change the button background color */
  color: #EF8345!important; /* change the font color */
  box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #4E7C72 !important;/* change the button background color */ 
  color: #F0A166 !important;/* change the button font color */
  border: 1px solid black !important; /* change the button border */
  border-radius: 8rem !important; /* change the button shape */
}

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

/* stack mobile breadcrumb nav links */
@media only screen and (max-width:767px) {
  .nested-category-tree-wrapper>ul {
    flex-direction: column;
  }
}

On 11/7/2023 at 10:17 PM, AirleaEvary said:

I would also like to add a different symbol to the breadcrumb menu but I'm using a section of code that forces the breadcrumbs to behave differently, can something be added to what I have to make a separation icon between links? I also need to make the font match my custom upload. 

www.thejanimalstore.com password Artist2023

here is all my code, the code concerning the breadcrumb adjustments is toward the bottom: 

@font-face {

    font-family: MrsEavesOT-Roman;

       src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf);

  }

h1 {font-family: MrsEavesOT-Roman;}
h2 {font-family: MrsEavesOT-Roman;}
h3 {font-family: MrsEavesOT-Roman;}
h4 {font-family: MrsEavesOT-Roman;}
p {font-family: MrsEavesOT-Roman;}
.header-title a {
  font-family: 'FontTitleHere' !important;
}
.header-nav-item a {
  font-family: MrsEavesOT-Roman !important;
}
time.summary-metadata-item.summary-metadata-item--date {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-title-link {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-read-more-link {
    font-family: MrsEavesOT-Roman !important;
}
.sqs-add-to-cart-button-inner {
  font-family: MrsEavesOT-Roman ;
}
.header--menu-open a {font-family: MrsEavesOT-Roman}
.collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status {
  font-family: MrsEavesOT-Roman !important;
}
.blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;}
.item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;}
.blog-item-title h1.entry-title {
    font-family: MrsEavesOT-Roman !important;
}
#siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element {
    font-family: MrsEavesOT-Roman !important;
}

a.nested-category-breadcrumb-link {
    font-family: MrsEavesOT-Roman !important;
}
/* Product Detail - Description */
section.product-details.ProductItem-details * {
    font-family: MrsEavesOT-Roman !important;
}

.collection-type-products .ProductItem-details .product-price,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children

  {
  
    font-family : MrsEavesOT-Roman;
    
    }
.newsletter-block .newsletter-form-header-title {
  font-family: MrsEavesOT-Roman !important;
}
/* Cart page custom font */
div#sqs-cart-container * {
    font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important;
}
/* Promotional popup custom font */
.sqs-popup-overlay-content * {
    font-family: MrsEavesOT-Roman !important;
}
// Newsletter Form Description //
.newsletter-block .newsletter-form-header-description p {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Fields //
.newsletter-block .newsletter-form-field-element {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Button //
.newsletter-block .newsletter-form-button {
  font-family: MrsEavesOT-Roman !important;
}

.variant-option * {
    font-family: MrsEavesOT-Roman !important;
}
// For the Form
.sqs-block-form .field-list .title,
.sqs-block-form .field-list .caption,
.form-wrapper .field-list .field .field-element,
.sqs-block-form .field-list select,
.form-wrapper .field-list textarea,
body:not(.button-style-default) .sqs-block-form .sqs-editable-button {
    font-family:  MrsEavesOT-Roman !important;
}
.form-wrapper .field-list .field .caption {
  font-family: MrsEavesOT-Roman;
  font-size: 9px;
  color: white;
  letter-spacing: .15em;
  text-transform: none;
}

.sqs-block-button-element {
box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); 
}

.sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary {
    box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75);
}

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F0A166!important; /* change the button background color */
  border: 2px solid #EF8345!important; /* change the button border */
  font-size: 1.2rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#4E7C72!important; /* change the button background color */
  color: #EF8345!important; /* change the font color */
  box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #4E7C72 !important;/* change the button background color */ 
  color: #F0A166 !important;/* change the button font color */
  border: 1px solid black !important; /* change the button border */
  border-radius: 8rem !important; /* change the button shape */
}

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

/* stack mobile breadcrumb nav links */
@media only screen and (max-width:767px) {
  .nested-category-tree-wrapper>ul {
    flex-direction: column;
  }
}

You want to change this > to custom icon?