Changing breadcrumb destination

Hi everyone! I helped work on a website with an e-commerce page. I created an index page with a grid summary to the shop, newsletter, and footer so we could keep the design uniform across the site. When you click on a product, there is a breadcrumb above which takes you back to the shop page rather than the index. Is there a way to change this? The reason being, we want to keep the style uniform with the same footer information across the site. 

I hope I explained myself well.

Hi Mushaboom - I'm looking for a similar solution. Did you ever figure out a work around?

Thanks!
Sarah

On 4/19/2021 at 5:31 AM, sarahjane95 said:

Hi Mushaboom - I'm looking for a similar solution. Did you ever figure out a work around?

Thanks!
Sarah

Hi. I solved some cases. If you share link to a product, we can give the code tho change this link

On 4/20/2021 at 7:43 PM, tuanphan said:

Hi. I solved some cases. If you share link to a product, we can give the code tho change this link

Hi Tuanphan,

Here's one of the product pages that I want to change the breadcrumb links on:
https://chinchilla-aqua-e5lr.squarespace.com/candle-products/bamboo-candle-style

I want the "Candle Products" in the breadcrumb to link to:
https://chinchilla-aqua-e5lr.squarespace.com/scented-candles

The site password is: bougie

Thanks!
Sarah

On 5/5/2021 at 3:36 AM, sarahjane95 said:

Hi Tuanphan,

Here's one of the product pages that I want to change the breadcrumb links on:
https://chinchilla-aqua-e5lr.squarespace.com/candle-products/bamboo-candle-style

I want the "Candle Products" in the breadcrumb to link to:
https://chinchilla-aqua-e5lr.squarespace.com/scented-candles

The site password is: bougie

Thanks!
Sarah

Add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() {
	$('a.ProductItem-nav-breadcrumb-link').attr('href','/scented-candles');
});
</script>

This works across all the bread crumb links. How do we target a specific URL. For example I would like to take /ebikes-db and point it to /ebikes.   Also make take /accessories-db and point it to /accessories.

OR how would we target specific collections so that each collection listed had a different URL to point to?

Thanks! 

=Bobby=

On 5/6/2021 at 4:26 AM, tuanphan said:

Add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() {
	$('a.ProductItem-nav-breadcrumb-link').attr('href','/scented-candles');
});
</script>

 

On 9/17/2021 at 4:04 AM, bobbykimani said:

This works across all the bread crumb links. How do we target a specific URL. For example I would like to take /ebikes-db and point it to /ebikes.   Also make take /accessories-db and point it to /accessories.

OR how would we target specific collections so that each collection listed had a different URL to point to?

Thanks! 

=Bobby=

 

We can arget tag/category. Can you share link to a product on your site?

On 9/19/2021 at 11:49 PM, tuanphan said:

We can arget tag/category. Can you share link to a product on your site?

Hi Tuanpan

I'm looking for a similar breadcrumb solution to what Bobby was after. I am using summary product blocks with filtered categories to show specific country images on my portfolio country pages as want to stay with my previous url history but now sell photos from my site.

For example in my America West Coast portfolio page i want the product page breadcrumbs to point back to the America West Coast page rather than to the overarching Street | Travel Photography page (i used css from another response to change the link from my Gallery Shop to my Street | Travel Photography page, though need to change that as well so it doesn't say Gallery Shop). Likewise for the America East Coast products i would want those to point back to the America East Coast portfolio page etc. I have only put a few test products on the West Coast page to get the setup right before doing the rest of the pages.

Ideally i am after a Street | Travel Photography - America West Coast - product title so people can go back to the previous single country page or the main overarching countries page.

portfolio page url is https://purple-chinchilla-4bnr.squarespace.com/landscape-street-urban-travel-stock-photography-gallery/america-west-coast 

password: london202202

Thanks

Ivan

On 1/27/2022 at 6:44 AM, IvanOB said:

Hi Tuanpan

I'm looking for a similar breadcrumb solution to what Bobby was after. I am using summary product blocks with filtered categories to show specific country images on my portfolio country pages as want to stay with my previous url history but now sell photos from my site.

For example in my America West Coast portfolio page i want the product page breadcrumbs to point back to the America West Coast page rather than to the overarching Street | Travel Photography page (i used css from another response to change the link from my Gallery Shop to my Street | Travel Photography page, though need to change that as well so it doesn't say Gallery Shop). Likewise for the America East Coast products i would want those to point back to the America East Coast portfolio page etc. I have only put a few test products on the West Coast page to get the setup right before doing the rest of the pages.

Ideally i am after a Street | Travel Photography - America West Coast - product title so people can go back to the previous single country page or the main overarching countries page.

portfolio page url is https://purple-chinchilla-4bnr.squarespace.com/landscape-street-urban-travel-stock-photography-gallery/america-west-coast 

password: london202202

Thanks

Ivan

Hi, change (1) or (2) link?

7 hours ago, tuanphan said:

Hi, change (1) or (2) link?

Hi Tuanphan

Ideally to have 1  as Street | Travel Photography -  2 as America West Coast - 3 as El Capitan mountain, but if that's to much then 1 as America West Coast - 2 as El Capitan mountain

thanks

Ivan

Hi @tuanphan any further thoughts on how I can do this? Thanks 

On 2/1/2022 at 4:51 PM, IvanOB said:

Hi @tuanphan any further thoughts on how I can do this? Thanks 

Hi,
I'm on Lunar New Year (to Feb 07).
You can remind me in the next week

--

I saved your question

Hi @tuanphan,

If this thread is still open, I'd love to get some help with the same issue as Mushaboom & SarahJane95.

We built a several pages with summary blocks for each product category, because the shop page is not presentable due to the design limitations . But, the breadcrumb on each product page still returns visitors to that shop page. 

I would like to modify the breadcrumb to go to a custom URL instead, but the code injection appears to not do anything....

Here is one of our product pages:
https://frog-saffron-lxdy.squarespace.com/book-store/p/88

The default breadcrumb goes to the Store page, which we want to avoid using:
https://frog-saffron-lxdy.squarespace.com/book-store

We'd rather have it go to a custom URL, such as this: 
https://frog-saffron-lxdy.squarespace.com/all

Borrowing from the code injection for the footer that you offered SarahJane95, I modified it to:

<script>
$(document).ready(function() {
    $('a.ProductItem-nav-breadcrumb-link').attr('href','/all');
});
</script>

If you have any suggestions on how we change the default breadcrumb path, we would be so grateful.

Thank you!

Cheers, Van

On 2/22/2023 at 10:39 PM, Van_h said:

I would like to modify the breadcrumb [on the Product Detail Page] to go to a custom URL instead, but the code injection appears to not do anything.

Hi @Van_h

The code above isn't working because it relies on a large file called the jQuery library. This must be loaded before the code, otherwise the code doesn't know what to do! If you added this, it would look something like this:

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha384-Ft/vb48LwsAEtgltj7o+6vtS2esTU9PCpDqcXs4OCVQFZu5BqprHtUCZ4kjK+bpE" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $('a.ProductItem-nav-breadcrumb-link').attr('href','/all');
  }); 
</script>

Before you rush to add this, a better solution is to use some 'pure' JavaScript that does the same thing without requiring the jQuery library to be loaded first. 

For example, you could use this version instead. It will load at least 200 times faster 🙂

<!-- Replace PDP Breadcrumb root URL with /all -->
<!-- Squarespace version 7.1 only              -->
<!-- Provided by Paul @ sf.digital             -->
<script>
  window.addEventListener('DOMContentLoaded', (e) => {
    var crumbLink = document.querySelector('a.ProductItem-nav-breadcrumb-link');
    if (crumbLink) {
      crumbLink.href='/all';
    }
  });
</script>

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009,

That worked perfect! Thank you so much!!! We really appreciate it 💖
Warmest, 
Van

@paul2009 Can we have code injectors per each category? 

For example, my Shop page has Categories Clothing and sub-categories: Unisex Clothing and Women's Clothing

and Shoes and sub-categories:: Men's and Women's.

If I put your code and have the breadcrumb "Shop" go to "/shoes", then if someone is on a product page in Women's clothing, the breadcrumb will show: Shop/Name of Product, if I click on 'Shop' there, it will go to my /shoes page.

2 hours ago, nirajshah22 said:

Can we have code injectors per each category? 

Perhaps you are looking for the functionality in my Breadcrumbs Extension?