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
Tourist
52 4 6

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

Full Automated Shopify Store for only $280, Inbox me.
0 Likes
New Member
6 0 0

thank you SohelRana

here is my store allbrightdeals.com

0 Likes
Tourist
52 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. 

Full Automated Shopify Store for only $280, 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
Tourist
52 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? 

Full Automated Shopify Store for only $280, 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
Tourist
52 4 6

Well, add this line on your js function. 

 

  _this.style.fontColor = "#F8B619";

I hope it will solve your problem. 

Full Automated Shopify Store for only $280, Inbox me.
0 Likes
Tourist
52 4 6

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

Full Automated Shopify Store for only $280, Inbox me.
0 Likes
Highlighted
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