Have you noticed animated Add to Cart buttons on any Shopify store?
You may have wondered, “how to do it?”.
Well, wonder no more. In this tutorial, I am going to show you how to animate the “Add to Cart” buttons on your Shopify store. When you are done, the Add to Cart buttons on your store will shake like Shakira.
Start your engine. We are going on a ride to travel how to animate shopify add to cart button.
Methods to animate your Shopify “Add to Cart” buttons
There are 2 methods to get this done.
Those are:
- Using code (step-by-step method shown)
- Using Shopify apps
Method 1: Using code (step-by-step instructions with video)
You can stop holding your breath and relax. Just because this method needs codes doesn’t mean it’s going to be rocket science. I have tried my best to break it down for you so that you can do it with a blindfold on. Well maybe not that simple but you get the idea.
Step-1
Duplicate your Shopify store theme. You can do it the following way:
Go to your Shopify Admin panel
Navigate to Online Store > Themes
Next, click “Actions”.
From the dropdown menu, choose “Duplicate”.
You can see it in action in the video below:
Note: if you have 20 themes on your account, then 1 must be deleted before you can duplicate a theme.
Step-2
Navigate to the Edit code option. You will find it in the drop-down menu of the Actions button.
Step-3
Locate the file titled “product-template.liquid”. You will find the Add to Cart buttons here.
Step-4
Press Ctrl+F to open the text box to find a text. Type here “addto”.
It will show up.
Step-5
You will notice a code snippet that has <button and </button at the beginning and end respectively.
Paste the following code at the top and bottom respectively:
<div class="shakehorizontal"> ------ (this goes over the <button)
</div> (this goes below the </button)Step-6
Done?
Locate the theme.scss.liquid file under the “Assets” section on the panel on the left side of the code section.
Step-7
Paste the following code at the bottom of this file:
.shakehorizontal {
animation: alexpngshakehor 6s;
animation-iteration-count: infinite;
.text {
display: block;
font-size: 2em;
width: 100%;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
}
.fadeInDown.text {
-webkit-animation-duration: 1.6s;
animation-duration: 0.8s;
}
}
@keyframes alexpngshakehor {
0% { transform: translate(13px, 0px) rotate(0deg); }
1% { transform: translate(-12px, -0px) rotate(0deg); }
2% { transform: translate(-15px, 0px) rotate(0deg); }
3% { transform: translate(15px, 0px) rotate(0deg); }
4% { transform: translate(13px, -0px) rotate(0deg); }
5% { transform: translate(-13px, 0px) rotate(0deg); }
6% { transform: translate(-15px, 0px) rotate(0deg); }
7% { transform: translate(0px, 0px) rotate(0deg); }
8% { transform: translate(0px, 0px) rotate(0deg); }
80% { transform: translate(0px, 0px) rotate(0deg); }
90% { transform: translate(0px, 0px) rotate(0deg); }
100% { transform: translate(0px, 0px) rotate(0deg); }
}
Note: The “theme.scss.liquid” file can not revert to its older version. So make sure you copy and paste the code above exactly the way it is.
Step-8
Just click “Save”
If you now visit your product pages, you will see the “Add to Cart” buttons move horizontally back and forth.
Video tutorial
Feeling frustrated by so many steps? Well, you can watch the video of the entire process in the video below:
What do you need to do after putting in the code?
After you see your add-to-cart buttons shaking, you will need to do something else to ensure everything is working flawlessly. You will now need to test this shaking animation on mobile devices to make sure it’s working fine.
When that is confirmed, click on the cart button to make sure the product is properly adding to the cart.
Remember, no one in the world can be too careful. In case this cart animation messes up with the backend functionality, then people will not be able to make purchases. And you know what that means. They will start fleeing from your Shopify store like their backsides are on fire.
Method 2: Using Shopify apps
If you are not comfortable with the code snippets I have shown above, then no worries. There are apps in the Shopify store that help you animate your Add to Cart buttons in various ways.
I deserve a treat from you. Why?
Because I have done the legwork and listed some of those apps for them.
Note: Don’t worry; the apps below are free.
Shopify App 1: Add to Cart Button Animation
Add to Cart Button Animation lets not only animate your cart buttons but style them as well. One of our clients experienced a 0.9% boost in her conversion rate using this app.
Price: it has both free and paid plans ($3.95/month)
Shopify app 2: Add to Cart Animator + Shaker
Add to Cart Animator + Shaker app, like its cousin above allows you to animate your “add to cart” buttons without the hassle of any codes. It is simple to use the animation works well on all devices.
Price: it has both free and paid plans ($2.99/month).
You can get it free with our Shopify themes
Wrapping up:
Animating your add-to-cart buttons on Shopify may not always lead to higher conversion rates. But it does boost the visibility of the button. Unless a visitor finds a dancing/shaking cart button weird, he/she is likely to click it.
I sincerely hope you get a positive result and if you want to create a successful Shopify store this rocket articles for you to get all over knowledge How to create a successful Shopify store in 30 minutes.
See you in my next post.
And if you face any issues, feel free to let me know in the comments below. I read all of them as a lovely person should.
){kind=link}