Jump to content

Product Page Breadcrumbs edit

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

here is an example of a product details page using "simple" mode.

https://www.gallerymilmar.com/artists/ashot-asatryan/p/the-return-of-the-prodigal-son-2013

I would like to remove the separator and a second part of the breadcrumbs and just leave the author link. Also, if possible, an arrow character before the author name would be nice. code injection is okay.

Somewhat similar to what this guy has https://www.steeven-salvat.com/store/warbeast

Edited by revisor
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted (edited)
On 6/8/2023 at 1:23 AM, tuanphan said:

Add to Design > Custom CSS

span.ProductItem-nav-breadcrumb-separator, .ProductItem-nav-breadcrumb-link:last-child {
    display: none;
}

 

thanks, it works. That being said, is there an easy way to change the content of an html tag as well by any chance? for example to change that same breadcrumb from an artist name to just "back to artist". I assume you'd need to use js script to access the content? how would the code injection cool like?

Edited by revisor
Link to comment
On 6/10/2023 at 7:40 AM, revisor said:

thanks, it works. That being said, is there an easy way to change the content of an html tag as well by any chance? for example to change that same breadcrumb from an artist name to just "back to artist". I assume you'd need to use js script to access the content? how would the code injection cool like?

Change to this?

image.png.cd3ec3139b3e2ab60ca26e79b0001274.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
38 minutes ago, tuanphan said:

Change to this?

image.png.cd3ec3139b3e2ab60ca26e79b0001274.png

I was thinking of "← back to the artist" so that it can be used for any artist, but any code will do since I can reverse engineer the string myself

Link to comment
  • Solution

Add to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("Ashot Asatryan", "← back to Ashot Asatryan");  
    });
});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)
On 6/12/2023 at 8:19 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("Ashot Asatryan", "← back to Ashot Asatryan");  
    });
});
</script>

 

very nice, thanks, I modified it to account for different artists, so this would be the final version.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".ProductItem-nav-breadcrumb-link").html(function() { 
          return ("← BACK TO ARTIST");  
    });
});
</script>

 

Edited by revisor
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.