Some Ideas for Checkout Effects

Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms and transitions.

By in Playground on
Demo Code

A while back we explored a morphing button concept where the active element gets transformed into its target, aiming to create a fluid UI experience with a semantic connection of the involved elements. Today we want to apply that same concept and some other ideas to the first step of the checkout process. The checkout process in online stores is one of the most challenging and crucial in terms of UI design. Done well it can create a pleasant and smooth purchasing experience for the user; done wrong, it can lead to an abandoned shopping cart and no sale at all. There are many carefully planned and well designed e-commerce sites out there and making the UI uncluttered is definitely a great trend welcomed by anyone who buys things online.

With the demos we’ve created today we are looking into how we can make the peek into the shopping cart, one of the potential first steps of the purchase process, more fun and engaging while exploring some new layouts and effects.

They are simple concepts that hopefully spark your imagination for new ideas.

Please note that we use lots of new CSS properties that will only work in modern browsers.

IE does not allow a transformation of table rows which is a real shame; so you might not see the table rows animating in some of the effects.

The shopping cart icon used in the demos is by Freepik from www.flaticon.com and it’s licensed under CC BY 3.0.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Here are the screenshots of the demos:

CheckoutConcepts01
CheckoutConcepts02
CheckoutConcepts03
CheckoutConcepts04

We hope you enjoy these ideas and get inspired 🙂

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Circular SVG Text Animation

Creating the Effect of Transparent Glass and Plastic in Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 31

Comments are closed.

  2. This actually reminds me of the new Kohl’s checkout process. It is not quite as modern as this but it is definitely showing some better UI.

  5. Just curious, I noticed on certain elements you had declared transform: translate3d() translate3d();. Why was there a need to have it twice with different values? I figured the second would override the first. I wasn’t aware that you could have it twice on transform.

    Great use of CSS transitions by the way! They really work great!

  6. I have an eCommerce site that I’m working on, and this tutorial/code couldn’t have come at a better time. Thanks Mary Lou! =D

  7. You guys doing an amazing work on this… i just love codrops team, keep sharing and create new good things… im one of your fans… you guys help me in so many ways..

    thank you

  12. I would of liked to have seen a worse case scenario including, subtotal, delivery, qty, long item names and descriptions. But overall very nice and inspiring!

  14. Es un excelente trabajo, muy limpio y con mucha funcionalidad, además es posible darle otros usos….

  18. I’m alway interrested in these kind of visual effects and always want to use it for my projects. But does these kind of animations compatible with most of the browser of today? I can’t find any information for this.

  21. Thanks for sharing this. I normally love all that have some UX issues here. When shopping online the cart is very important and in all these examples there isn’t a running total visible prior to clicking the button or opportunity to “pay now” without reviewing the cart.

    In terms of reviewing items in cart, I could see the final example being useful though and with all that said, still pretty, thanks for sharing

  22. This design looks very nice, but i have some hesitation because even that looks very nice, something very important as the conversion must be contemplate before any changes on the checkout. Besides that it looks pretty good.

  23. Hi! I’m trying to learn UX design and web development, and I’m really amazed at how you did these things! I would love to make some of these one day! How difficult are these to do? I still have a lot lot to learn, and I would love some advise

  25. really cool and very clean ideas…. but its a shame they dont work on IE… still many people that use it 🙁
    Mary Lou, thank you for the post!!

  26. It’s beautiful and truly polished Checkout design. Might use it in my next web project. 🙂

  28. Absolutely love this! Working on an e-commerce now, definitely opened my eyes to a bit more innovation, thanks Mary!