Checkout Page from Diamond Candles

swiped by Swipe-Worthy in July 2016 from diamondcandle.com

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

Checkout Page from Diamond Candles

Key Takeaways

  • 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.

Analyst Spotlight

Swipe-Worthy

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!

Historical Screenshots

Visit the archives of this swipe's source URL or view past screenshots of diamondcandle.com below.

Go To Archives of This Site

Get The Latest Swipes In Your Inbox.

  • Join the other 10,000+ savvy marketers & copywriters who get swipe updates.
  • You'll receive our special newsletter every few weeks.
  • You'll be the first to know about new site features & additions.
4 Annotations
Annotations
July 12, 2016

On mobile, the design stays the same, but the widths get smaller & the right column stacks on top of the left column.

Swipe-Worthy
Swipe-Worthy The Founder
July 12, 2016

Like the shipping address, the credit card number is another area with lots of input fields. Knowing this, Diamond Candles only shows you the other fields once you start typing your card #. It feels less overwhelming & they even transfer over your name to the cardholder name field.

Swipe-Worthy
Swipe-Worthy The Founder
July 12, 2016

Entering your shipping address is one of the more tedious parts of a checkout form. Diamond Candles makes this feel easier by giving you the option to "search" for your address first. If that doesn't work or auto-complete doesn't kick in, you can fill it in manually.

Swipe-Worthy
Swipe-Worthy The Founder
July 12, 2016

The "Complete Checkout" button stays stickied at the bottom of the screen as you scroll. It keeps the end in sight & makes the form seem shorter.

Swipe-Worthy
Swipe-Worthy The Founder

I'm Interested In Seeing...

Get The Latest Swipes In Your Inbox.

This Swipe's Short Link

Share This Swipe

Add to Collection

x

You must be logged in to collect content