Jump to content

Adding a Link or Button to the bottom of a Store Page

Recommended Posts

Site URL: https://crystal-voyager.com/crystal-voyager-store

Hello,

Because of the product amount limitation of 200 items per page, I have had to split my store into two different pages under a folder labeled Shop. I wanted to add a button or link to the bottom of the page that says go to page 2 (and the reverse go back to page 1) at the bottom (after the last product before the footer). I cannot figure out the best way to do this since store pages only allow you to add products, not additional links or buttons. I know this needs to be done with code injector but I cannot figure out how to place this option in the right location. It always just goes to the top of the page. I would really appreciate it if someone could help me with this. It seems like it should be so easy!

Link to comment

Add this code to crystal-voyager-store Page Header

<script>
 jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block tp-custom-button"><div class="sqs-block-button-container--center"><a href="https://google.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">Back to Store 1</a></div></div>').insertAfter('.main-content-inner-wrapper');
 }); 
</script>

Replace Text/Google URL with url what you want

Screenshot_3.thumb.png.564ccab32bda95fa12a869be184132c8.png

Edited by tuanphan

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
On 5/15/2022 at 1:17 AM, tuanphan said:
<style>
 jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block tp-custom-button"><div class="sqs-block-button-container--center"><a href="https://google.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">Back to Store 1</a></div></div>').insertAfter('.main-content-inner-wrapper');
 }); 
</style>

This is exactly what I wanted to do but when I pasted this code into the injector on this page the button did not show up 😞

Link to comment
On 5/15/2022 at 12:25 AM, Crystal__Voyager said:

Because of the product amount limitation of 200 items per page, I have had to split my store into two different pages under a folder labeled Shop.

The 200-product limit only applies to pages on Squarespace 7.0. You can have upto 10,000 products on a Squarespace 7.1 site.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
On 5/17/2022 at 5:27 AM, Crystal__Voyager said:

This is exactly what I wanted to do but when I pasted this code into the injector on this page the button did not show up 😞

Updated the code. You can check again

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

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.