Jump to content

Add something ("back to store link") above individual product pages

Recommended Posts

Posted

hello. looking to add a return to store button (or custom plugin, etc.) above a product listing. this would be the same thing for all products, so a general solution is welcome. I am aware I can turn on breadcrumbs, but would like something a little more customized. thank you. 

Screenshot 2023-08-20 134800.png

  • Replies 1
  • Views 894
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Posted

@artbyaizen Here's a code snippet to add a "back to store link" above individual product pages. Add the code below under Settings > Developer Tools > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    addStoreLink();
    function addStoreLink(){
      $('.ProductItem-nav').append('<div class="customStoreLink"><a class="customLink" href=\"https://www.artbyaizen.com/store\">Back To Store</a></div>');
    }
});
</script>

Then add the code below under Website > Utilities > Website Tools > Custom CSS

.ProductItem-nav {
	display: grid !important;
	justify-content: start !important;
}
.customStoreLink {
    grid-row: 1 !important;
}

We can also change the text link to a button. I created the solution customized for your website. You might be able to find a plugin to achieve this functionality. 

Let me know how it goes. Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.