Logo
April 9, 2011
By Erwin Otten

Improved Magento one page checkout design (CSS only!)

When you've got some experience in Magento, you know it's one page checkout (the default checkout page of Magento) isn't nearly as sexy as the rest. The vertical accordeon initially looked ok, but after three years everyone has learned it's one big jumpy, confusing and bloated interface that just doesn't do the job. Many have fallen for the simple interface of the commercial one step checkout module, but we at H&O always believed the default OPC had some potential underneath its dusty layer of CSS.

One page checkout improvement with tabbed design

Ok, that's not true. But for one of the projects we were recently working on, we weren't able to use the commercial one step checkout module because of some other modules that were extending our checkout. As an experiment, we decided to redesign the vertical accordeon design to a horizontal interface with progressbar. We removed some less-important elements (mainly text-related) and redesigned the forms to create a better, less space consuming single column of elements. We ended up with a good looking, improved checkout design that we think is more inituitive than the original. The beauty of it all is that we made it a CSS only solution, meaning we did not make any changes to the template files. This gives our improved checkout the following benefits:

  • No complex installation process, just a minor css upgrade to your existing template
  • Crossbrowser compatible
  • Easy to customize to fit your own design
  • CSS3 animated (won't do any harm in Internet Explorer)
  • CSS only, so you can still use other commercial checkout extending modules
  • Comes in two designs, one with process indicaton bar and one with a tabbed design

I can't tell anything about higher conversion rates, a better user checkout experience or reduction of shoppingcart dropouts just yet, but I've got the idea that this is a way better checkout experience than you can offer through the original one page checkout. Try it yourself and use the comments to let me know what you are experiencing. I would also love to see what you guys can come up with in terms of design (show me those shiny customised OPC designs!).

Download ZIP

Notes

  • To install, copy the provided CSS and paste it in your styles.css, just below the one page checkout styles. (search for the comment: / One Page Checkout /)
  • The CSS provided is designed to work for Magento's default theme. If your webshop uses a custom theme and you've made some small ajustments to the checkout already, you might have to tweak our CSS a little.
April 9, 2011
By Erwin Otten

Looking for a Magento webshop specialist?

We'd love to get in touch with you. Let's start a Magento webshop project?