Sticky Buy Now Button in Dawn Theme

[MreenalChauhan]

Hi,

My website is mgrow.club.

Here is the link to my product page. I dont have Add to Cart option but direct Buy Now button. I want to add Sticky Buy Now button on the product page: https://mgrow.club/products/design-strategy-for-next-billion-users

How can it be done

[Alok_Kasgar · Accepted solution]

Hi @MreenalChauhan 

May be jQuery library file missing. you c an add below code above the code that shared by me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

[Alok_Kasgar]

HI @MreenalChauhan 

I hope this solution will works. feel free to text me back if you have any question.
Please follow below steps
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.shopify-payment-button__button{
position: fixed;
bottom: 0px;
left: 0;
right: 0;
z-index: 999;
margin: auto;
max-width: 480px;
}
</style>

[Alok_Kasgar]

One More Alternate Option (button will sticky after scrolling down)

I hope this solution will works. feel free to text me back if you have any question.
Please follow below steps
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.shopify-payment-button__button.activebtn{
position: fixed;
bottom: 0px;
left: 0;
right: 0;
z-index: 999;
margin: auto;
max-width: 480px;
}
</style>

<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 500) {
$(".shopify-payment-button__button").addClass("activebtn");
} else {
$(".shopify-payment-button__button").removeClass("activebtn");
}
});
</script>

[MreenalChauhan]

Thanks Alok_Kasgar1. But none of the codes worked somehow. Am I missing something?

[Alok_Kasgar · Accepted solution]

Hi @MreenalChauhan 

May be jQuery library file missing. you c an add below code above the code that shared by me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

[MreenalChauhan]

It worked perfectly. Thanks a ton..

[MreenalChauhan]

Hey Alok,

Just one problem with this code. "Buy Now" sticky button is on the entire website including homepage, blog pages and not just on product page. Is there any way it can only be present on product page only.

[Alok_Kasgar · Accepted solution]

Update this code, It will work only on product page now

{% if template.name == 'product' %}

<style>
.shopify-payment-button__button.activebtn{
position: fixed;
bottom: 0px;
left: 0;
right: 0;
z-index: 999;
margin: auto;
max-width: 480px;
}
</style>

<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 500) {
$(".shopify-payment-button__button").addClass("activebtn");
} else {
$(".shopify-payment-button__button").removeClass("activebtn");
}
});
</script>

{% endif %}

[MreenalChauhan]

It worked. Thanks a lot

[Ugurcan]

Hi @MreenalChauhan;

If you are considering adding a Sticky button. We have a free Sticky Cart app that works on any theme. You can easily add it with the app and keep your code clean so you can upgrade to Dawn's newer versions easily later on.

Here is the app store link: https://apps.shopify.com/pasilobus-sticky-cart

We especially recommend not using Jquery or similar libraries which will drop your speed score.

[Stephen567]

Thanks for the instructions, but nothing here seemed to work for my Dawn store, based on checking using the Preview option. 

[Ugurcan]

@MreenalChauhan We recently released a sticky add-to-cart button app with a free plan. It works with all themes including Dawn, check it out: https://apps.shopify.com/pasilobus-sticky-cart

[MRamzan]

Sticky add to cart buttons feature you can add with this tutorial: