In comparison to other checkouts I've experienced, Diamond Candles wins for most efficient & seemingly short, multi-step checkout. The best part is, from...View More an implementation standpoint, you can do most of what they've done very easily. The biggest trick they use to make their one-page checkout simpler is by only revealing all the shipping address fields once you start typing out your address & by only revealing all the credit card fields once you start typing in your credit card number. Because the shipping address & credit card section are often the lengthiest parts of a checkout form, this makes the form appear very easy to fill out and take in as a whole. They're following the idea that you only need to see the first field to understand the process & then the following necessary fields will show once you fill out everything leading up to them. Also, note how (in the animated image below) Diamond Candles groups the credit card fields together into one box (resembling a credit card) so it doesn't look like four separate fields. Another unique implementation is how they keep the final checkout button at the very bottom of the screen as you scroll. The final call-to-action is always in main sight, which also gives the appearance of a shorter checkout experience.
Checkout Page from Diamond Candles Swiped in July 2016
You don't have to completely get rid of certain input fields in order to make your form seem shorter & you don't have to separate your multi-step checkout into different pages either. Diamond Candles shows you that you can have a one-page checkout that appears extra short & manageable simply by tweaking the design & only showing certain fields once they absolutely need to be filled out.
The #1 technique they use to make their form appear shorter is by only showing the lengthy address fields once you start searching for your address & only showing all the credit card fields once you start typing in your credit card number. Creating this effect only requires a few lines of code where you're hiding certain fields & only showing them once another field has been typed in.
Diamond Candles condenses & positions their four credit card fields into a rectangular box, more resembling a credit card. Not only does this layout create a visual connection, it also takes up less space & makes it seem like there are less fields.
Instead of hiding your buy button at the bottom of the page, try making it sticky at the bottom of the browser window so it's never out of sight. This makes sure the big call-to-action is always visible & easy-to-find.
Mike Schaueris the founder of Swiped.co and the main analyst in the swipes section. After intently studying & building conversion-focused websites for 6+ years, he started Swiped to help others master marketing & copywriting through the analysis of great examples!
Visit the archives of this swipe's source URL or view past screenshots of diamondcandle.com below.