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

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

viaco
Excursionist
31 0 7

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!

Replies 6 (6)

shreyhweb
Shopify Partner
633 111 115

@viaco 

 

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

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
viaco
Excursionist
31 0 7

Hi,

 

I just sent you the url through dm.

 

Thank you

shreyhweb
Shopify Partner
633 111 115

ok i will check

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
633 111 115

@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. 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
viaco
Excursionist
31 0 7

@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
Shopify Partner
633 111 115

@viaco 

 

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

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com