How to Instantly Optimize Your Add to Cart Button for Conversions

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.