How to add an add-to-cart animation to your Shopify store

What a fly-to-cart animation is

After a successful add, a copy of the product image moves across the screen and drops into the cart icon. Then the cart count updates. It answers one question for the shopper: did that work?

Without it, the only sign is often a number in the header going from 1 to 2. Easy to miss, especially on a small screen.

When it helps, and when to skip it

It helps most where the confirmation is easy to miss:

• On mobile. Screens are small and a thumb covers part of them. A change in the cart count alone often goes unnoticed.
• Quick add on collection pages. The shopper stays on the product grid. There is no product page or cart page to confirm the add.
• Themes that only update the count. If nothing opens after an add, nothing else on the screen changes.

It isn’t always worth it:

• Heavy themes. If the store already loads slowly or runs many apps, another script on every product and collection page has a cost. Fix speed first.
• Very minimal brands. A quiet, restrained storefront may be better served by a cart drawer or a subtle count change than by motion.
• A cart drawer that already opens on every add. The drawer is already clear feedback. An animation on top can feel like two confirmations for one tap.

Three ways to add one

1. Your theme’s settings

Start in the theme editor. Many themes, including Shopify’s free Dawn, let you choose what happens after an add: open a cart drawer, show a popup notification or go to the cart page. Some themes also include their own add-to-cart animation. Look under Theme settings > Cart and in the product and collection sections.

If your theme already does what you need, you’re done. No extra script and no extra cost.

2. Custom code

A developer can build the animation into the theme. At a high level:

• Wait until Shopify confirms the add before animating anything.
• Copy the product image, place it over the original and move it to the cart icon with CSS transforms, which keep the motion smooth.
• Update the cart count when it lands, and skip the motion for visitors who have reduced motion turned on.
• Cover every add-to-cart button the theme has: product page, quick add and any sticky add-to-cart bar.

You get full control. The trade-off is that the code lives in your theme, so moving to a new theme, or to a new version of the same one, usually means adding it again.

3. An app

An app adds the animation through the theme editor, with no theme code to edit. Use one when you want it working today, don’t have a developer, or want to change or turn it off without touching code. Keep in mind that it is one more script on your storefront and one more monthly fee.

The no-code option: CartMotion

CartMotion is a Shopify app that adds a fly-to-cart animation without code.

We may earn a commission if you install CartMotion through this link.

When an add succeeds, the product photo flies to the cart icon. A character, a cat or a pumpkin, catches it and throws it into the cart. If that is too playful for your brand, turn the character off and only the photo flies.

• Product pages and quick add. It works on product pages and on quick add from collection pages.
• Set up in the theme editor. All settings live in the Shopify theme editor, next to the rest of your theme.
• It never adds to cart itself. CartMotion only animates the adds your store makes. If an add fails or the product is sold out, nothing flies, so shoppers never see a confirmation for something that isn’t in their cart.
• Pricing. $2.99 per month, with a 7-day free trial.

See CartMotion on the Shopify App Store.

Before you install

• Test it on a real phone: a product page, a quick add from a collection, and a sold-out product
• Check page speed before and after installing, on the same pages with the same tool
• Match the character to the brand, or turn it off so only the photo flies
• Make sure it doesn’t double up with a cart drawer or popup that already confirms the add
• Try it with reduced motion turned on in the phone’s settings