shelbyroller Posted January 6 Share Posted January 6 I was wondering if anyone had experience with adding a floating button to Squarespace 7.1? I want this to be available when someone begins to scroll on a page. So far, all of the code that I have found is for older versions of Squarespace. Thanks! Link to comment
Solution paul2009 Posted January 6 Solution Share Posted January 6 (edited) On 1/6/2023 at 7:32 PM, shelbyroller said: I was wondering if anyone had experience with adding a floating button to Squarespace 7.1? If it helps, I produced a guide for adding a floating button to mobile devices:Mobile CTA footer for Squarespace 7.1. I've also posted a solution for a single button here: If this doesn't suit your needs, please provide some more details about your requirements. Did this help? Please give feedback by clicking an icon below ⬇️ Edited February 15 by paul2009 Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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)Buy me a coffee Link to comment
GeneCWayne Posted February 27 Share Posted February 27 This is great and works well, but it places the floating button on very page. Is there a way to place it on one specific page only? Thanks, Gene Link to comment
paul2009 Posted February 28 Share Posted February 28 7 hours ago, GeneCWayne said: Is there a way to place it on one specific page only? Yes! Instead of adding the code (in step 1) to the site-wide code injection panel, you can add it to the per-page code injection panel instead. Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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)Buy me a coffee Link to comment
JonJonJJ Posted March 4 Share Posted March 4 On 1/6/2023 at 8:38 PM, paul2009 said: If it helps, I produced a guide for adding a floating button to mobile devices:Mobile CTA footer for Squarespace 7.1.⬇️ Awesome! Hi @paul2009. Thanks for sharing the code! Is there a chance to bring the floating buttons underneath the opened menu (burger menu on mobile)? At the moment the buttons are above the sqsp-header-button. Best! Jon paul2009 1 Link to comment
paul2009 Posted March 4 Share Posted March 4 2 hours ago, JonJonJJ said: Is there a chance to bring the floating buttons underneath the opened menu (burger menu on mobile)? Hey Jon In the Custom CSS (around line 31), reduce the z-index to 10 (instead of 10000) and this should do the trick 🙂. Did this help? Please give feedback by clicking an icon below ⬇️ JonJonJJ 1 Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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)Buy me a coffee Link to comment
JonJonJJ Posted March 5 Share Posted March 5 12 hours ago, paul2009 said: Hey Jon In the Custom CSS (around line 31), reduce the z-index to 10 (instead of 10000) and this should do the trick 🙂. Did this help? Please give feedback by clicking an icon below ⬇️ Great! Thank you so much for your feedback! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment