Jump to content

Changing breadcrumb destination

Recommended Posts

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.

Link to comment
  • 7 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

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>

 

 

Edited by bobbykimani
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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

Edited by IvanOB
wrong password
Link to comment
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?

12.png.bd108849cab11183ca385c3683c04aa6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, tuanphan said:

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

12.png.bd108849cab11183ca385c3683c04aa6.png

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

Link to comment
  • 1 year later...

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

Link to comment
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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 8 months later...

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

Link to comment
2 hours ago, nirajshah22 said:

Can we have code injectors per each category? 

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.