How to do Add to Cart button shake on your Shopify store

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

The shaking Add to Cart button will attract as much attention as possible and effectively increase conversion of any product page in your store.


If you want to create this effect for your Add to Cart button, it’s super simple! Follow these steps:

Step 1: Add CSS code

  • From your Shopify admin, to to Online Store > Theme.
  • Find the theme you want to edit and then click Action > Edit code.
  • In the Assets section, find to SCSS file (ex: theme.scss or style.scss…) and open that file in the online code editor.
  • Go to end line and paste the below code:
  • Click Save

Step 2: Add a new class for the buttons

Now, you must find all the buttons you want to add this effect and add a new class btn-shake for them.

Happy coding!

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

1 Response

  1. Alessandro says:

    Well, first of all thank you for your guide. You are right, i think it can help to attract guests and so i wish to have also in my website. But i have an issue, i can’t find where is (in the theme files) this section about the “classes of the buttons”. Can you help us (me) also for this ?

Leave a Reply

Your email address will not be published. Required fields are marked *