Add a Back button to a Product details page, SS 7.1

Site URL: https://meeting-house-fabric.squarespace.com

I seem to find similar questions to this, but no definitive answer to my issue.

Despite telling my client that users can make use of their browser's back button, she has insisted I put a styled back button on her site's shopping pages. Originally I turned on breadcrumbs, but frankly, SS's implementation of that feature is terrible, and it doesn't quite give me the functionality I need.

So I added a code block that works with the site's overall style, and am able to put it on the collections pages (see first screenshot), but not on a product's detail page (which is where she wants it most!).

Can anyone help me add the back button in roughly the same spot on the product's detail page? (See second photoshopped screenshot for how I'd like it to look.)

website: https://meeting-house-fabric.squarespace.com
pass: fabric

button:

<button style="width: 90px" class="outline_btn3" onclick="history.back(-1)"/><center>Back</center></button>

css:

.outline_btn3 {
    border-style: solid;
  	border-width: 2px;
  	border-color: #9c9a84;
    background-color: transparent;
    color: #9c9a84;
    padding: 12px 24px;
    font-size: 15px;
    cursor: pointer;
}
.outline_btn3:hover {
    background-color: #9c9a84;
    color: #ffffff;
}

Hi. I see button on product detail page. What is your problem now?

https://meeting-house-fabric.squarespace.com/fabric

Hey @tuanphan, there isn't actually a button on the product detail page. You may have been looking at the image in my previous post...I added the button to that in Photoshop only to show where I'd like the button to go. But that doesn't exist on the actual page:

https://meeting-house-fabric.squarespace.com/shop/p/primitive-gatherings-muslin-for-moda-1040-21-tallow-wmhtg-gads6-gmfmj-fst75-h8wm8-hrjme?rq=Kona

thanks and appreciate any help

A

On 8/12/2021 at 11:20 PM, watts-design said:

Hey @tuanphan, there isn't actually a button on the product detail page. You may have been looking at the image in my previous post...I added the button to that in Photoshop only to show where I'd like the button to go. But that doesn't exist on the actual page:

https://meeting-house-fabric.squarespace.com/shop/p/primitive-gatherings-muslin-for-moda-1040-21-tallow-wmhtg-gads6-gmfmj-fst75-h8wm8-hrjme?rq=Kona

thanks and appreciate any help

A

Add to Last Line in Code Injection Footer

<script>
  jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--left"><a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Back to Shop</a></div></div></section>').insertBefore("nav.ProductItem-nav");
 }); 
</script>

@tuanphan

Thanks so much, the code worked beautifully! I had to make a few adjustments to meet my style and function needs, but you getting it on the page was a HUGE help. As ever, you rock! :)

On 8/14/2021 at 6:34 AM, tuanphan said:

Add to Last Line in Code Injection Footer

<script>
  jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--left"><a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Back to Shop</a></div></div></section>').insertBefore("nav.ProductItem-nav");
 }); 
</script>

 

@tuanphan This was super helpful, thanks for sharing! Do you know how to make it appear on mobile also? Thanks!

15 hours ago, BoulevardNorth said:

@tuanphan This was super helpful, thanks for sharing! Do you know how to make it appear on mobile also? Thanks!

I think the code should run on all devices.

Can you share link to a product? I will check it again

Hello @tuanphan, I am also wanting to add a back button to my product detail pages. I added the code to the last line of my footer code injection. However I don't see the back button appear on my product detail pages. Here's a screen shot. Thank you

website: https://www.pawyears.com/collections/p/midnight-gold-06

I did some digging into the code you provided and later realized that code was specific to that site. Sorry about that, i thought i could just copy that code into my site and it would work. So I did some more digging into adding in a button and ended up with this. Added this to my footer injection. 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var button = document.createElement("button");
    button.type = "button";
    button.onclick = function() { history.back(); };
    button.innerHTML = "Back";
    button.className = "custom-back-button"; // Add the class here
    var navContainer = document.querySelector('.ProductItem-nav');
    navContainer.parentNode.insertBefore(button, navContainer);
  });
</script>

and this to my header injection.

<style>
  .custom-back-button {
    background-color: #885816;
    color: #f2f2f2;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .custom-back-button:hover {
    background-color: #0d0d0d;
    color: #f2f2f2;
  }
</style>

got this method to work for me. and here's result.