Directly from the receipt page Add an ‘Edit Order’ link or button directly in the Order Confirmation page.   Contact information (Optionally) add a section with ways to contact you if they need to edit their order and prefer speaking to a customer service representative.

Curbside pickup Since covid, the trend is to offer safe contactless curbside pickup. So that could also be an option.

Remove the main navigation This will reduce the likelihood of them navigating away to another page of the site and abandoning their cart. For a good example to illustrate this best practice, take a look at how Shopify does it (see below). The header and footer are removed, but they keep a couple of ways […]

Some data According to Business Insider, 28% of US online shoppers abandon their cart because they don’t want to register/create account just to make a purchase. According to Baymard, it is the reason given by 31% of shoppers. (source) ASOS’s approach removed the account creation step on the checkout login page and it reduced their […]

Before you do… If you have very low conversion rates everywhere, then try to optimize that first.   Start with high converting steps If you have a low conversion rate on your checkout page, then put an upsell only in your product pages (or in any other part where you don’t have low conversion rates). […]

Typical payment methods Credit card PayPal Google Pay Apple Pay   PayPal In regards to PayPal, roughly half the stores I looked at (see the table below in the examples) offer an express PayPal checkout with a CTA button at the same place as the normal ‘Checkout’ button (in the cart). And the other half […]

Inline validation Show a checkmark after each correct input. When the user makes an error, such as entering a wrong credit card number, show the error message right next to or below the field it relates to.   Preserve data Preserve the form field data entered on validation errors   Side note Credit card numbers […]

Be explicit According to Baymard, 73% of stores don’t explicitly mark both required and optional fields. Only a few of the stores I looked at implement this – and it is very easy to do. As a consequence, 32% of users during testing encountered a validation error because they did not complete a required field. […]

Optional fields are disruptive Showing optional fields by default disrupts the checkout experience: Completing the checkout steps takes 5% to 30% longer Users doubt the correctness of order data More validation error messages More orders are submitted with incorrect information   Default visible fields Typically, those fields are: Full Name Street Address Zip Code Country […]

Checkmark In other words, check the “Same as shipping address” checkmark by default. If they uncheck it, then it displays fields to set a different shipping address.

Based on the field type Show the correct keyboard based on the type of the field the user is typing into. For example, if they’re entering a phone number or an email, then it should be a different keyboard than when they enter their first name.   Email keyboard   Name keyboard     Phone […]

One baby step at a time The first decision users need to make is which payment option they want. Once they select one of the options, then it makes sense to show the related fields to that option.

A confusing number Shoppers struggle with verifying that they typed their credit card number correctly, which is a cause of cart abandonment. Baymard observed that 23% of users either type or verify their card number in 4-digit blocks.   Increase accuracy Allowing them to type spaces and auto-formatting their card number with spaces can increase […]

Detect and show As the user starts to enter their card number, detect and show the type of credit card it is.

Avoid disappearing field labels The issue is when the placeholder text disappears as soon as you start typing, you can easily forget which field that was – especially if you’ve filled out a few fields.   Shopify Shopify’s default behavior is fine because once you start typing in a form field, the placeholder text becomes a […]

Static but relevant width To be clear, the field size should be static, NOT adjusted dynamically as users type. It should simply set to match the expected input. For example, a zip code field should be shorter than a name field.

Address Finder This is known as an Address Finder. See the Uber app as a good example of how to do this.   Google AutoComplete API Look into the Google AutoComplete API. You can turn this on in Shopify in the checkout setting.

Relevant state values In the checkout form, if you sell to multiple countries, this will ensure that the state/province values are for the correct country.

Big dropdowns are frustrating The reason why you should avoid dropdowns with more than about 10 options is that they are annoying to use. For dropdowns with fewer than about 5 options, it can be replaced with radio buttons, toggle switches or checkboxes (if only 2 options), etc.

Too many options State dropdowns contain too many options and make it unusable. A province dropdown isn’t as bad since it only contains 13 options.   An address finder is preferable This recommendation is if you don’t have an address finder (see best practice #123).

An address finder is preferable This tip is valid only if you don’t have an Address Finder field and keep the traditional address fields (street, city, state/province, country, zip). It will simplify the checkout form a little. Please see best practice #123 for that better solution.   Complex checkouts create abandonments From the data I […]

ISO format The ISO standard for this format is “MM / YY”. Make sure that keyboard use is supported for these fields, and not force users to use the mouse as 24% of users prefer filling out the expiration date with the keyboard.   And as you type, the formatting (the slash separator) is automatically […]

Multi-column forms create usability issues users omit to notice some fields fill out the wrong fields out of confusion (source)   Shopify And actually, Shopify implemented this, their checkout form is a single column (except for the name fields and the country / state / zip). Their second column has a summary, discount code, subtotal, […]

Test, test, test Test a One-Page Checkout especially if your average order value is low and you’re selling impulse purchases. If you can, split test against a multi-step checkout, because it is not clear which option will yield higher results for your specific industry and store, as evidenced below.   Power Support One-page checkouts and […]

Fewer errors Input masks reduce the number of validation errors, which can reduce site abandonments. Restricted fields are for example a phone number, credit card number or a date.   Regional differences You should also consider regional differences in format. For example, the date format in the US is MM/DD/YY, in Europe it’s DD/MM/YY, and […]

Especially for smaller brands According to Baymard, 18% of shoppers (from 1044 respondents in US) abandon their cart because they do not trust the site with their credit card information. The tips below are especially important if your store is NOT a large brand such as Apple, Microsoft or Walmart.   Trust seals, padlocks, and […]

Catch errors and suggest a correction I’ve seen examples where you could type an address with a street number (only a street name), which is invalid. So depending on the quality of the address finder, you may still want to have an address validator to catch invalid addresses that the Address Finder allows. If the […]

Payment options change per country If you sell internationally, users prefer certain payment methods based on where they live. For example, in South America, bank transfers are very common. (source)

For multi-step checkouts Add a progress bar at the top of the checkout which highlights which step they’re at, and gives a clear overview of all the steps.

On desktop This is more easily done on desktop, as there is enough space to always be showing the order summary.   On mobile Just make sure to show it on each step of your checkout, it doesn’t need to always be visible as they scroll.

How? Give them the choice to sign up or log in to their account, but the guest checkout could be selected by default, and visually attract more attention than the other options. Users expect it in the upper-left on desktop, and on top on mobile. Clearly label the Guest Checkout option (include the word “Guest”) […]

36% of stores Baymard reports that 36% of stores don’t! (source)   Confusing And if the cardholder name is your first field, 33% of users will type their credit card number in it because that’s what appears on their card.   Order of fields Typically, the order of the information on credit cards is: Credit […]

Most stores Let’s say you’re buying something and made it to the Order Review step, you’re ready to hit the Place Order button, and you realize that you messed up your address, or your card expiration date. What do you do? Most stores force you to go back to one of the previous steps to […]

Required phone fields cause abandonments Required but unexplained phone fields were observed to be a direct cause of abandonments for the subgroup of users who are suspicious of a site’s motives. – Baymard   58% of brands don’t provide an explanation Below is a poll done by Baymard to 2800 shoppers.   Do you need […]

PCI compliance PCI compliance prevents stores from saving a user’s credit card number directly. As a consequence, 84% of stores do not allow users to edit the credit number directly. Users are required to add a new credit card and delete the old one.   A solution An elegant solution to this problem is to […]