fbpx

Last Updated on

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:

<button type="submit" name="add" id="AddToCart-...

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.

If you aren’t confident in editing your theme, we can install this for you for a one time fee of $25. Send us a message to order!

About LaunchTip

LaunchTip was born out of a necesity to extended functionality on the Shopify platform. Built by merchants for merchants.

Learn More

Leave a Reply

Fast-Track Your Shopify Store.Get our FREE Ignite Guide 🔥 on what you can do right now.
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound

Get the #1 Upsell App which has generated over $100m in Upsells!   Get App