Want to make your Add to Cart button shake on your Shopify store with some simple CSS magic? You are in the right place. In this tutorial, I am going to show you. How you can do this free, easy and fast.

You may have seen examples of stores where the “Add to Cart” button shakes or jiggles to get your attention. This can be great for a conversion boost as it draws the customer’s eye to the call to action.

There are many ways of executing this because there are many CSS/JS libraries out there that can animate your buttons. Some are pure CSS meaning you just need to add some lines of code to a stylesheet and then add the class to the button you want to animate. Woah! I hear some of you saying. Did I lose you? Ok, maybe this will make it sound easier… “You just need to paste some text at the bottom of one file and then add some text to one line in another file.”

Don’t worry, we will show you how to do it.

Step 1: Add the following code to your CSS file

First things first. Make a BACKUP of your current theme. To do this, just “Download” the current active theme to your desktop. This way you have a backup you can reload if you make a mistake. Sensible right?

Next, you need to find your style sheet. For most, this is called “theme.scss.liquid” and is found under Assets. Once you have located that, paste the code below in red at the bottom like the screenshot (ignore the yellow highlight):

.shake {
animation: shopifyshake 4s;
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 shopifyshake {
0% { transform: translate(1px, 1px) rotate(0deg); }
1% { transform: translate(-1px, -2px) rotate(-1deg); }
2% { transform: translate(-3px, 0px) rotate(1deg); }
3% { transform: translate(3px, 2px) rotate(0deg); }
4% { transform: translate(1px, -1px) rotate(1deg); }
5% { transform: translate(-1px, 2px) rotate(-1deg); }
6% { transform: translate(-3px, 1px) 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); }
}

Step 2: Add one word to your “Add to Cart” class

This is not quite as straightforward because this step varies quite a bit from theme to theme.

Having said that, hopefully, we have explained it clear enough below that you will understand what to do!

So a quick crash course in CSS. The code from step 1 is like a set of instructions and now we need to tell our theme what to instruct.

In order to do this, we need to add the word “shake” to the add to cart button in the code. That’s it.

On the latest “Debut” theme, for example, this is found in the “product-template.liquid” under sections. (You should be still in the code editing section of your theme)

Next, you need to scroll down to the “AddToCart” button and add the word shake to the class as shown in the screenshot below.