How to make add to cart button stick when scrolling on mobile.

Solved
Highlighted
Tourist
6 0 1

Hi everyone!

Hoping somebody can help me out with an issue I have come across. I am trying to make the "add to cart" button pop up at the bottom of the screen once it has been scrolled past on mobile. Now online there is lots about jquery and different sticky buttons but I can't seem to get anything working in the way that I've visualised. Currently I'm using this code which has created another add to cart button stuck to the bottom of the page.

 

<style>
@media only screen and (max-width : 768px) {
/* Fixed button for mobile */
.stickyatc {
position: fixed;
bottom: 0;
left: 0;
width: 100;
height: 64px;
font-size: 24px;
top: inherit !important;
box-shadow: 0 0 28px 6px rgba(176, 176, 176, 0.7);
margin-bottom: -6px;
z-index: 1001;
}
}
</style>

 

The only issue is it looks a bit cluttered with the other add to cart button being on the screen at the same time. Hoping somebody could help me out or if it will be a big job direct me to a 3rd party who might be able to sort it out. The theme being used is brooklyn and my website url is  thepawquarters.com

 

Feel free to leave any feedback aswell if you think something looks sloppy!!

Thanks everyone!

Highlighted
Tourist
7 1 2

This is an accepted solution.

Hi Dan,

 

I'd suggest taking a look at this CSS Tricks link as an example, they're a great resource: https://css-tricks.com/scroll-fix-content/ depending on your abilities with CSS, etc. let me know what you think.

 

Good luck!

Highlighted
Tourist
6 0 1

Thank you. My css knowledge is pretty minimal however day by day I do feel like its making more sense! I'll check it out, is this something you would know how to do?


@boompah wrote:

Hi Dan,

 

I'd suggest taking a look at this CSS Tricks link as an example, they're a great resource: https://css-tricks.com/scroll-fix-content/ depending on your abilities with CSS, etc. let me know what you think.

 

Good luck!


 

0 Likes
Highlighted
Tourist
6 0 1

Had a read and the idea kind of makes sense but not sure how i'd code that into my website to be honest with you. Thanks for the link though! It's a handy website to know.

0 Likes
Highlighted
Tourist
7 1 2

Hi Dan,

 

Yes, I could help you add this customization to your site if you'd like!

 

Please smash that like button if you found the link helpful.

 

Best,

Highlighted
Tourist
6 0 1

Honestly if you could it would make my day! Been messing around for weeks now, do you need any links or anything from me?

0 Likes
Highlighted
Tourist
7 1 2

Hi Dan,

 

Okay sure! How's about you email me at: ryan@boompah.com and we take a look at what's possible.

 

You can also add that email to your store, etc.

 

Best,

0 Likes
Highlighted
Tourist
7 0 2


Find the add to cart button and paste this id="buttonFixed" on your button.
Look something like this:

<button id="buttonFixed" class="add-to-cart" >Add to Cart</button>

Add the css

#buttonFixed {
 position:absolute;
 z-index:9999;
 height:auto;
}


Add this script code (I paste on my theme.liquid, but I think will work on your product template)

if ($(window).width() <= 640) {
        jQuery(function($) {
          $(window).scroll(function fix_element() {
            $('#buttonFixed').css(
              $(window).scrollTop() > 1000 
              ? { 'position': 'fixed', 'bottom': '30px', 'width': '90%' }
                : { 'position': 'relative', 'bottom': 'auto' }
            );
            return fix_element;
          }());
        });
      }

Paste jquery on the theme.liquid

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

0 Likes