How to do Add to Cart button shake on your Shopify store
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:123456789101112131415161718192021222324.btn-shake:hover {animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}@keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);}20%, 80% {transform: translate3d(2px, 0, 0);}30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}40%, 60% {transform: translate3d(4px, 0, 0);}}
- 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!
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 ?