Add to card

Component location

Files are located in src/components/forms/addtocart. Inside you’ll find:

JS file with add-to-cart logic and optional animation.
HTML example snippet.
SCSS file for styling the cart UI and animation helpers.

Cart counter

Add data-anim-addtocart to the element that displays the cart quantity. The component will update this value automatically.

Cart quantity markup


<div class="cart">
	<span class="cart__quantity" data-anim-addtocart>0</span>
</div>

Add to cart button

Add data-anim-addtocart-button to your “Buy / Add to cart” button. On click, the cart counter will increase.

Button markup

<button type="button" data-anim-addtocart-button>Add to cart</button>

Product wrapper & quantity

To enable product-level features (quantity and image animation), wrap the product with data-anim-addtocart-product.

Product wrapper


<div data-anim-addtocart-product class="product">
	...
	<button type="button" data-anim-addtocart-button>Add to cart</button>
</div>

Quantity via input

Add data-anim-addtocart-quantity to an <input> that controls quantity. The entered value will be used when adding items.

Quantity input


<div data-anim-addtocart-product class="product">
	...
	<input data-anim-addtocart-quantity autocomplete="off" type="text" name="form[]" value="1">
	<button type="button" data-anim-addtocart-button>Add to cart</button>
</div>

Quantity via “Quantity” component

You can also use the template’s Quantity component and still connect the value via data-anim-addtocart-quantity.

Quantity component integration


<div data-anim-addtocart-product class="product">
	...
	<div data-anim-quantity class="quantity">
		<button data-anim-quantity-minus type="button" class="quantity__button quantity__button--minus"></button>
		<div class="quantity__input">
			<input
				data-anim-addtocart-quantity
				data-anim-quantity-value
				autocomplete="off"
				type="text"
				name="form[]"
				value="1">
		</div>
		<button data-anim-quantity-plus type="button" class="quantity__button quantity__button--plus"></button>
	</div>

	<button type="button" data-anim-addtocart-button>Add to cart</button>
</div>

Fly-to-cart image animation

To animate the product image flying into the cart, add data-anim-addtocart-image to the product’s <img>.

Enable fly-to-cart


<div data-anim-addtocart-product class="product">
	...
	<img src="..." data-anim-addtocart-image alt="Image">
	<button type="button" data-anim-addtocart-button>Add to cart</button>
</div>

Animation speed

To control animation duration, set a value (milliseconds) on data-anim-addtocart-image. Default is 500ms.

Custom animation speed

<img src="..." data-anim-addtocart-image="1000" alt="Image">

Tip

Place the cart icon/counter in a stable location (header). The animation looks best when the destination doesn’t jump due to layout shifts.

Download

Build e-commerce UI faster: cart counter, quantity control, and a clean “fly to cart” animation. Download the template and start shipping today.

Download Animmaster Vite Template Save your time — start now

Component: Cart (Add to cart) Quantity + optional “fly to cart” image animation