Jump to content

Amazon style step-by-step checkout


Recommended Posts

I recently made a rare purchase from Amazon.  I also recently made a rare decision to upgrade from CC 4 to CC 6.

CC 6 is beautiful.  I love it.  Except the checkout process.  Everything is there but it is monolithic.

The Amazon approach is phased across multiple pages approximately as follows:

  • Review cart
  • Enter billing address
  • Optionally enter delivery address
  • Select shipping options
  • Enter payment information
  • Review summarized information with option to change everything
  • Commit

CubeCart has all this, but it is on just two pages, one of which is optional:

  • View Cart
  • Check-out

I believe Smarty will allow something more like the Amazon solution merely by changing the template

Is there an existing template that already has something like this?

My vision is:

  • Review Cart (always) - including shipping quote according the current solution (with adjustments noted elsewhere)
    • This gets us the country and postcode from which we derive the region
    • And it completes the shipping method solution so we have a finalised order right here, on one clean, simple and beautiful page.
  • Provide billing address
    • there is a "Back to Basket/Cart" button
    • there is an "I want to deliver to a different address" button
    • there is a "Check out" button
  • Optionally provide delivery address
    • there is a "Back to billing address" button
    • there is a "Back to Basket/Cart" button
    • There is a "Check out" button
  • Check out
    • Start with "Would you like to save these details for next time?"
      • If so, enter passwords
      • Saving details for next time is a statement of customer benefit.
      • Create an account sounds like something that benefits us.
      • The benefits are clearly listed
        • You wont have to enter address details next time.
        • You can save multiple billing and delivery addresses
        • You can see your order history
        • You can reprint receipts and invoices any time
        • You can create and park an order, then review it and pay later
    • Then solicit permission to send newsletters
    • Then select payment method or offer to park the order.
    • All three sections have large clear headings.
  • Summary
    • List the cart, shipping information, account status (including username) payment method
    • Buttons or links to revise any part of the order
    • Buy or Park for later payment:
      • Park is useful if the customer is having card trouble, or if they need to query the shipping price.
      • It is also useful for us if the shipping solutions do not deliver, in which case, park is the only option.
      • And it may be useful in other circumstances, for example where we have agreed to adjust the order in some way before payment.
      • I use it for international shipments, because the price is heavily dependent on packed dimensions:
        • Customer creates and parks order (I currently use the Direct bank deposit option for this, but it is somewhat misleading for the customer and requires explanation .)
        • Ideally, at this point, the store sends an order confirmation.
        • I work out the actual parcel size and weight, get a quote, adjust the shipping cost, notify the customer with instructions on how to find the parked order.
        • Ideally, at this point, the store sends a notification of payment pending, with instructions.
        • Customer chooses to proceed, logs in, pays.
        • I ship.


Link to comment
Share on other sites

Most of the skins available on the marketplace use Foundation as a base, so I imagine they all use a similar process, my own (a butchered version of clean skin) certainly does.

I'm sure it's possible to do, just would require skin modification.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...