Last Updated on by Dan S
Originally Published January 20, 2020.


Want to make your Add to Cart button shake on your Shopify store? With some simple CSS magic, we will show you how!

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 customers eye to the call to action.

There are many ways of executing this because there are many CSS/JS libraries out there which 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 straight forward 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.

To clarify, the button code is like this:

If you find this, you just need to find the word “class=” and add “shake” in lowercase like the screenshot above.

 

Thats it!

You should now be able to see the Add To Cart shake on your product pages.

 

A few notes.

Themes on Shopify vary. Some will have the Add To Cart button in a template, some will have it in a section and some may have it in a snippet. If you have a third party theme, the developers may have named the AddToCart identifiers slightly different.