How To Make Add To Cart Button Stick When Scrolling On Mobile

[viaco]

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. Or maybe creating a new button that sticks at the bottom of the screen when scrolling past the main one. 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.

The theme being used is debutify and I will tell my url via dm.

Thanks everyone!

[shreyhweb]

@viaco 

Yes it is possible think. Please give me the store URL then we will able to help you. 🙂

[viaco]

Hi,

I just sent you the url through dm.

Thank you

[shreyhweb]

ok i will check

[shreyhweb]

@viaco 

Please add the below code above </body> in theme.liquid

online store >> edit code >> theme.liquid

<style>
@media screen and (max-width: 767px) {
.product-single__add-to-cart .mrk-abs-btn {
position: fixed!important;
bottom: 0!important;
width: 100%!important;
margin-left: -15px!important;
}
.product-single__add-to-cart .mrk-abs-btn button#customily-cart-btn {
box-shadow: 0px 0px 5px #000!important;
max-width: 95%!important;
margin: auto!important;
margin-bottom: 20px!important;
}
}
</style>

after the added this code in theme.liquid

If this solution helpful for you then Please like the post and tap on accepted. 

Thankyou for reaching us. 🙂

[viaco]

@shreyhweb Thank you so much for the code.
I just added it and the button is always sticked but it has to be only when the main one is not showing on screen so when you scroll past it

[shreyhweb]

@viaco 

Yes, it will be possible but after write some script for it in javascript. we can't explain here.