Summary

  1. The article demonstrates a shake animation intended to draw attention to the Add to Cart button.

  2. The example needs both the CSS animation styles and the shake class on the intended button.

  3. Theme filenames and markup vary, so identify your store's actual Add to Cart control and preserve its existing classes.

Optimizing your Add to Cart button is one of the simplest thing you can do to supercharge conversions.

How? We’re going to make your button shake like this:

That’s right. When we’re done here, your button will practically be irresistible to customers looking at your products.

There are 2 steps to turning your Add to Cart button into a selling machine.

First, we have to add some new CSS to your store. Head over to your site’s main CSS file and paste the code shown below there.

If you’re using Shopify:

  1. From your Shopify admin, go to Online Store > Themes.
  2. On your current theme, click Actions and select Edit code.
  3. Under Assets, select theme.scss.liquid
  4. Paste the CSS code below at the bottom of the file.
  5. Hit save.
@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  60% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }

}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  20%,
  30% {
    -webkit-transform: translate3d(-3px, 0, 0);
    transform: translate3d(-3px, 0, 0);
  }

  15%,
  35% {
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Now we’re ready to make your Add to Cart button shake. To do this, all you need to do is add the class “shake” to your Add to Cart button.

If you’re using Shopify, here’s how for the default themes (other themes will have different file names).

  1. From your Shopify admin, go to Online Store > Themes.
  2. On your current theme, click Actions and select Edit code.
  3. Under Sections, select product-template.liquid
  4. Ctrl+f or Command+f to search. Look for: type=”submit”
  5. This is probably your Add to Cart button. You can verify by looking at its code. If it has Add to Cart written anywhere, it’s probably correct.
  6. Look for the class attribute on your button. It looks like class=”…” where anything can be in there.
  7. Write shake before the closing “. So if the class looks like class="{{ btn_class }} btn--add-to-cart", you add shake to make it class="{{ btn_class }} btn--add-to-cart shake"

That’s it! Your Add to Cart button is now an irresistible selling machine that will work 10 times harder to make you money.

For more conversion tips, check out these 23 ways to boost your conversion rate.

Grow Your Shopify Store Every Day.

Improve your store's sales, one day at a time. We'll send you one small tactic everyday so you can make big gains. Subscribe below to get started:

Is your Shopify store
fast enough?

Find out what’s slowing your storefront down and where to start improving it.

Preparing your demo

  1. Checking your store
  2. Opening your homepage, a collection and a product
  3. Extracting the styles your first screen needs
  4. Getting your demo ready

This usually takes 10 to 30 seconds.

Open your demo

FAQ

What change does this article make to the Add to Cart button?

It adds a shake animation to attract attention to the button. The example combines animation styling with a class applied to the intended control.

What does the shake class do?

The class connects the button to the animation styles in the example. Adding the class only has an effect when the corresponding styles are present.

Do all Shopify themes use the same button markup?

No. The article notes that theme filenames differ. Identify the actual Add to Cart control in your theme rather than assuming the example's location matches every store.

Does this technique change what the button does?

The intended change is visual emphasis. It should retain the existing Add to Cart action and the button's other classes.

Is animation a complete conversion optimization strategy?

No. This article describes a focused visual tactic. Product information, usability, and the rest of the buying journey still influence whether a visitor completes a purchase.