Change add to cart button to loading image after click

New Member
6 0 0

Hi All,

I would like to change my add to cart button to this loading Gif image below after the visitor click the add to cart button and also the color of the button change. Can you help me please? thank you so much.

 giphy

 

 

0 Likes
Excursionist
53 4 6

Hi there, I can help you with this. Let me know your store link if you want. Best of luck!

To get Shopify Store Design, Customization and Development service, Inbox me.
0 Likes
New Member
6 0 0

thank you SohelRana

here is my store allbrightdeals.com

0 Likes
Excursionist
53 4 6

Well, you have to add some codes on your theme file. If you know some javascript and html then it will be fine. First of all, insert the image below the button and hide with css.

 

<style>
#addtocartGif {
  display:none;
}
</style>

<img id="addtocartGif" scr="/c/image/serverpage/image-id/13053i786D43DEC307EAB0/image-size/small?v=1.0&px=200">

Then add onClick js event on your add to cart button to show the gif image and to change the color of the button. 

 

<button onClick="Here is your custom function" type="button" name="add" id="AddToCart-product-template" class="btn btn--full product-form__cart-submit bundle-animated_add_to_cart bundle-btn-animation-shake _hover">

Write a custom function for the onClick event. This might help you. Best of luck. 

To get Shopify Store Design, Customization and Development service, Inbox me.
0 Likes
New Member
6 0 0

sorry but should  add these codes in product-template.liquid ? but where exactly?
and the custom function you said because i have no idea in coding?
And thank you so much for you help

0 Likes
Excursionist
53 4 6

Yes, you have to code on the product-template file and I need to login and check your theme file to do this exactly. Let me know if you are interested in a paid gig? 

To get Shopify Store Design, Customization and Development service, Inbox me.
0 Likes
New Member
6 0 0

Thanks SohelRana It Works! the only thing i need is to remove the button text after the loading image shows, what should i need to add?

i appreciate your help

0 Likes
Excursionist
53 4 6

Well, add this line on your js function. 

 

  _this.style.fontColor = "#F8B619";

I hope it will solve your problem. 

To get Shopify Store Design, Customization and Development service, Inbox me.
0 Likes
Highlighted
Excursionist
53 4 6

Don't forget to accept my reply as a solution if that solve your issue! 

To get Shopify Store Design, Customization and Development service, Inbox me.
0 Likes
New Member
6 0 0

i tried _this.style.fontColor = "#F8B619"; but the text button "BUY NOW" is still showing didn't disappear
should i add another function to clear the text?

0 Likes