Skip to content
animorio
IT
All kits

E-commerce

The animated pieces an online shop needs, in the order a shopper meets them: header and menu, the home page, the shop window and product cards, the product on stage, choosing and ratings, the add-to-cart button, cart and checkout, promotions and the footer.

170 pieces

Each piece can be watched live, tweaked in the Playground and copied on its own; the zip holds them all, each in its own folder.

Download the kit

The header

A shop header with many categories, a bar that shrinks and a search that opens when needed; or a ceramics shop’s bar with a drop sliding along the wire under the links.

The shop menu

Menus that open like the things the shop sells: matches, umbrellas, sweets, colour swatches, books, paper.

More shop menus

The menu of an outdoor clothing shop, quilted like a down jacket, and a stationery shop’s categories on a rotary card file; and a bookshop’s menu, with the item stretching between the margins.

The home page

The logo arriving gift-wrapped, headlines made of what the shop sells and a home page that moves under your hand.

The home page background

A background moving slowly behind the shop’s line, like the cloth it sells; and river pebbles that move aside as you pass.

The shop window

Products in a list or a grid, filters, a price range and photos to look at up close.

Product cards

One product per card, on a shelf or in a catalogue to leaf through: records, tea, vases, inks, postcards, seeds.

Shelves and series

For shops selling books and series: the spine that tilts towards you and shows the page edges.

The product on stage

A product that is unveiled, turns, pours or is shown while it is made, and the shop window when nobody is looking.

Toys and gifts

For toy and gift shops: the real toy moving on the page.

Games and prizes

For arcades and toy shops: the claw machine you steer, which sometimes grabs and sometimes misses, and a wooden toy shop’s logo rolling out of a marble run.

Choosing the product

Size, colour, grind, length, quantity and the guide to the models.

Configuring the product

A car dealer’s configurator: new paint sweeping over the bodywork, wheels that swap and a price that updates; and a watch’s product page that opens into an exploded view as you scroll, showing its movement; and a carbon wheel you look at up close as you scroll.

Products you can almost touch

Fabric swaying from its clamp, the perfume bottle that sprays out its notes and the box of pralines to open, its ribbon coming undone.

Products to open

A product card that opens in your hand: the tin of watercolour pencils, with colours to try on a paper strip before it goes in the cart.

Ratings and wishes

The wishlist, ratings and words from people who already bought it.

Add to cart

The most pressed button in the shop: the cart, velvet, the little trolley, the box, the hanger, the bike wheel that spins and brakes.

For small shops

The same button for shops that sell by weight, honey, sweets or from a vending machine.

The cart

The cart, gift wrap, the coupon, delivery and its day.

Checkout

The order steps, the pay button, the card, waiting for the bank and the confirmation.

Delivery

The delivery address checked country by country, which turns into the parcel label once it is right, and the shipping country picked on a thin drum.

The shop, kept clean

For a shop with a pared-back look: the size written with the width of the letters and the checkout steps on a single line.

Between the shop’s pages

Changes from the shop window to a section of the shop: quiet ones, or, for a paint shop, the roller painting the new page.

After the order

Shipping, delivery and return notifications.

Shop alerts

Order alerts as mail: the mailbox flag goes up and the envelope opens into the message, torn if the payment fails; and the payment confirmation stamped PAID on a paper notice.

Promotions

Games to win a discount, a code to peel off and a pre-order button.

Seasonal promotions

The Advent calendar with a gift a day and the fairground tin can alley to win a discount.

Writing to the shop

A plant nursery’s contact form: every field filled in properly grows a leaf, and the message leaves in a seed packet.

Trust and footer

Cookie consent, frequently asked questions, the page that is not there and the bottom of the site.

The other kits

All kits
Personal blogFor writing and being read: headlines, long articles, sign-ups.