how can i change the product breadcrumb home url

I have a store page  ( /gallery-store ) which will ( once i get this working ) contain a lot of artwork. but i need a way to filter so customers can look for "landscapes" or "geclee".  I am doing this by creating an index page with a dropdown menu with all the different search terms. each item in the dropdown is a link  "/gallery-store?tag=geclee" for example.

this does work and gives me a subset of all the paintings with the tag in question. however if you click on an image and go to the product detail page the breadcrumb home url is that of the store page and not my index page. 

so i am looking for a way to do some code injection to change the home url in the breadcrumb from pointing to the store page to my index page. 

Please post the URL for the mentioned index page on site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

thanks for taking a look at this. Unfortunately it seems i can not use a password protected site unless i sign up however until i know if i can make my site work via squarespace i can't actually sign up. kind of a problem. 

to add to my original post after some more testing, it appears the breadcrumb for the store page is different from the breadcrumb on the product detail page in that 

a) there are two different controls to turn them on and off (IE you can have store page breadcrumbs turned on while product detail page breadcrumbs turned off  and vice versa ) 

b) the product detail page breadcrumb only links back to the main store page so it does not display the categories the user used to get there. This means there is no way a user can look at a product detail and click on the breadcrumb and go back to the category she was just looking at. 

 c) after checking with support i was told this is functioning as designed. 

so the breadcrumb menu does not work as a true breadcrumb and i need a workaround for this. I can't be the only person to have run into this issue. anyones ideas are most welcome. 

thank you!

The site-wide password feature works during trial mode.

The warning they give you is just to remind you that if you want your site visible after the trial you have to pay.

ok thanks that was not confusing at all!

https://dove-capybera-nn4w.squarespace.com

pw: KK$ic4Djp7Qc^XFg{KJ1

i set up two drop down menus one has a link using categories one with tags. 

the cat link does have a breadcrumb but its really ugly and when you click on the image to go to the product detail page, the breadcrumb changes and only lets you go back to the store main page

the tag link doe not show the breadcrumb and once you go to the product detail page for any items shown, the breadcrumb shows up but again with a link back to the main store page. 

I am new to squarespace so it there is a better way to provide a filtered view of product groups I'd be really happy to hear about it. or if I'm going something wrong in my set up that would be ever better. 

thanks again for your time. 

Quote

 

however if you click on an image and go to the product detail page the breadcrumb home url is that of the store page and not my index page. 

so i am looking for a way to do some code injection to change the home url in the breadcrumb from pointing to the store page to my index page.

 

The OP has already done this step. If you are following along add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      begin change store page first breadcrumb link
      
      SS Version : 7.1
      
      */
      
      let pageUrlSlug = ''; // empty means home page
      
      // do not change anything below, there be the borg here
      
      if ( ! pageUrlSlug ) pageUrlSlug = '/';
      
      $( '.category-link:first, ' +
      
        '.nested-category-breadcrumb-link:first, ' +
        
        '.ProductItem-nav-breadcrumb-link:first' )
        
        .attr ( 'href', pageUrlSlug );
        
      // end change store page first breadcrumb link
      
    } );
    
  </script>

This is for v7.1.

Let us know how it goes.

Hey that seems to work well!

is there some documentation I should have read to figure this out? (IE did i miss something ) ? 

I have a couple other breadcrumb questions should i open new threads for them? 

I really appreciate your time, i've been researching this for a while and drew a blank.

Quote

is there some documentation I should have read to figure this out? (IE did i miss something ) ?

No. You needed something SS doesn't normally do, asked here, and I whipped up some code to help out! 🙂

Quote

I have a couple other breadcrumb questions should i open new threads for them?

Keep 'em here for now. Give folks some tine to answer them.

q2:  is there a way to move the storepage breadcrumb 

            a: align left  instead of center and bold it and change the font weight 

            b: add the current category to the breadcrumb menu 

                 example if i am in "cat1" the breadcrumb shows "all/"  and cat1 is bold on the sidebar.

                 id like the breadcrumb to show "all/cat1" 

q3 : is there a way to change the ALL link to point to my index page (like you did above with the product detail page "

q4: is there a way to pass the category from the storepage to the product detail page so the breadcrumb  on the product detail page would show " gallery>cat1>product"  so a customer could be looking at a category click on the detail page and then click on the breadcrumb to go back to the original category she was looking at?  

thank you!

how would i also change the text of the link  ?  forexample the link is "Gallery" but i might want to change it to "indexpage" or something like that.  I was hoping to do this by adding a statement like 
.attr ('text', 'new text'); 

to your above code but that's not working 

thank you!

Your site is private it is hard to help.

thanks for the response. i got it to work in a hacky way ( i've not used jquery before ) 

i tried to add  ".text (  'test'); right after your  ".attr ( 'href', pageUrlSlug );" but could not get that to work so i added 

  $( ( ) => {
      
     $( 
        
        '.ProductItem-nav-breadcrumb-link:first' )
        
        .text (  'test');
  
    } );

right after your code (just before the  </script> and that seemed to work, though i'm sure there is a better way to do this. 

i also noticed the breadcrumb menu on the product detail page is only two items long 

(link to main gallery) > (link to product detail page)

crome inspector shows 
<div class="ProductItem-nav-breadcrumb" data-animation-role="content">
    <a href="/gallery-store" class="ProductItem-nav-breadcrumb-link">Gallery</a>
    <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/gallery-store/p/m28u6386q8aqps2u8en7ahjxd0tkx7" class="ProductItem-nav-breadcrumb-link">Earth's Moon</a>
  </div>

by changing 

ProductItem-nav-breadcrumb-link:first
to
ProductItem-nav-breadcrumb-link:last

i can change the link name and target on the second link as well. 

so is there any way to ADD an item (element, child i'm not sure of the terminology ) onto the end of the breadcrumb ? 

i have tried 

.ProductItem-nav-breadcrumb-link:append 
and 
.ProductItem-nav-breadcrumb-link:add 

but they did not work. 

thanks again for your time.

On 4/16/2021 at 4:28 AM, creedon said:

The OP has already done this step. If you are following along add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      begin change store page first breadcrumb link
      
      SS Version : 7.1
      
      */
      
      let pageUrlSlug = ''; // empty means home page
      
      // do not change anything below, there be the borg here
      
      if ( ! pageUrlSlug ) pageUrlSlug = '/';
      
      $( '.category-link:first, ' +
      
        '.nested-category-breadcrumb-link:first, ' +
        
        '.ProductItem-nav-breadcrumb-link:first' )
        
        .attr ( 'href', pageUrlSlug );
        
      // end change store page first breadcrumb link
      
    } );
    
  </script>

This is for v7.1.

Let us know how it goes.

Hello @creedon
I wonder if you can help me. I used your code and it works, but only if I refresh the page before I click on the 'store' breadcrumb. Do you have any suggestions? I turned off Ajax just in case but there was no change. 

https://www.greghollandjewellery.co.nz/store/two-strand-river-earrings-in-silver

Thanks so much.
Claire.

@Claire_auck

I'm thinking the curse of Ajax Loading strikes again! Try turning off Ajax Loading to see if the problem goes away.

On 10/20/2021 at 12:39 PM, creedon said:

@Claire_auck

I'm thinking the curse of Ajax Loading strikes again! Try turning off Ajax Loading to see if the problem goes away.

I did think the same thing (even with my ridiculously limited knowledge) but it didn't seem to work yesterday. I've just checked it again today and it's working...maybe there was a delay in seeing the change? Anyway, it works now. Thanks for your awesome code fix!