Get an optimized Shopify checkout based on 18 industry standards

For the most part, the Shopify checkout design and functionality are not very flexible. This means that you don't have a lot of options to customize it.

This can be either good or bad for your conversion rate and user experience.

How can this be good? Well, you can trust that Shopify has done its best to optimize the checkout experience.

But if you'd like more control over some aspects, you are limited to a few settings.

Of course, if you're on the Shopify Plus plan, the options are much more extensive. They were close to limitless with the old checkout.liquid. But they are still highly customizable with the new Checkout UI extensions.

But for non-Plus stores, how well can you expect the checkout to perform?

Fortunately, there's a lot of research on the subject. The Baymard Institute, a major research institute, analyzes thousands of e-commerce websites. In 2021, they published a blog post describing 18 best checkout practices. And they measured how 71 high-traffic e-commerce stores performed based on these.

Here, I'll be evaluating the Shopify checkout experience, using these 18 points.

I'll also be including tips on how to implement these best practices.

Disclaimer: The implementation steps below disregard alterations to the checkout.liquid file. This is because it's deprecated by Shopify, and replaced by Checkout UI extensions.

Note: By 2024, the Shopify checkout has evolved. The most major update is the one-page checkout. Find out about all the updates here (filter for Checkout).

1. Make guest checkout the most prominent option

What does this mean?

You should let users checkout without having to create an account. And, this option should be the most prominent.

How does Shopify do?

This isn't even a step, so it does pretty well.

Shopify gives you a setting to force customers to create an account before checkout. If you disable it, it lets the user input their email and the rest of their info, directly. So it doesn't show an extra step that could slow down the process.

If the user wants to login first, they can do so before checkout.

How do I implement this?

Make sure you're not making users login or register. Go to your Checkout settings and make sure the "Require the customer to log in to their account before checkout" option is not selected.

2. Avoid too complex password requirements

What does this mean?

Don't force the customer to create a password that is too complicated or impossible to remember.

How does Shopify do?

It does fine, as it doesn't force users to create an account during checkout. Outside of that, it only requires that the password is 5 characters long.

How do I implement this?

No action required.

3. Show the delivery date instead of days to deliver

What does this mean?

Don't show "Delivery in 3 days". Show "Delivery by X day / date". This is much easier to comprehend.

How does Shopify do?

For the most part, not that great. Shopify itself only displays the rates you or your carrier provide. Their names have fixed content. So their text doesn't change dynamically. However, there are solutions.

How do I implement this?

This depends on your Shopify plan. If your plan lets you use custom shipping rate calculation (requirements here), then a custom app could generate rates and return them during checkout. Their names would include the exact calculated date. This is a costly solution.

Shopify Plus stores might also be able to use Checkout UI Extensions. These would display a message within the checkout flow, with the date for the selected rate.

4. Show a countdown to the cutoff time

What does this mean?

First, display the delivery cutoff time. This is the time that, after it passes, the order delivery date for orders paced, starts counting on the next day. Second, display it as a countdown, e.g. "within the next 4 hours" instead of "by 9 p.m.".

How does Shopify do?

Basically it's the same as the previous section (it doesn't do anything).

How do I implement this?

A few ways.

One way is the same as the delivery date. Find or develop an app that offers such a feature, with calculated shipping rates. The app would include the cutoff countdown in the rate name or description.

If you're not even displaying a cutoff time, one option you have is to use theme translations. For example, translate the title of the shipping methods.

You might not be able to achieve this in some cases, e.g. you're selling to different time zones.

Of course, Plus stores can use Checkout UI extensions to display this information.

5. Present “pickup” within the shipping methods

What does this mean?

If you offer store pickup as an option, present it alongside the other shipping options, such as "ship" or "local delivery".

How does Shopify do?

The Shopify checkout implements this. It's within the "Information" step. Technically, it's before shipping methods, but the effect is the same.

How do I implement this?

No action required. As long as you're using local pickup on your store, of course.

6. Easy comparison between pickup and shipping

What does this mean?

When choosing between pickup and shipping, customers want to have enough information. What are the costs of each? When will the item be available for pickup, and what's the time to delivery? How far would they have to drive?

How does Shopify do?

Shopify doesn't let you display any comparisons by default. But there are ways to fix this.

How do I implement this?

One easy way is to use theme translations, on the titles of the delivery methods.

For Shopify Plus checkouts, you can display much more rich content with Checkout UI extensions. This can be before or after the available delivery methods. Or, use Shopify Functions with the Delivery Customization API. Again, this is possible with an app.

7. Use Luhn validation for credit card validation

What does this mean?

Luhn validation is a method used to validate credit card numbers by checking their structure. It doesn't require sending the card number to the payment processor.

How does Shopify do?

The Shopify Payments form shows an error message when the user submits the form, if the number is incorrect. However, it's not showing it while the user is editing the number. This is less than ideal.

How do I implement this?

At the time of writing, there's no real way of implementing live validation as the user types the number.

8. Add spaces in the credit card number as the user types

What does this mean?

This is self-explanatory. It helps the user read the number and make sure it's correct.

How does Shopify do?

The Shopify Payments form already implements this.

How do I implement this?

No action required.

9. Use the same sequence of credit card fields as on the physical card

What does this mean?

This is self-explanatory. The credit card fields' order should be: number, expiration date, card holder, security code. This is more familiar to customers and avoids mistakes.

How does Shopify do?

So and so. The order of fields is similar. The only difference, the cardholder's name comes before the expiration date.

How do I implement this?

This is not in your control, unfortunately.

10. Correct expiration date field format

What does this mean?

Avoid anything else than a field that accepts the standard format of MM/YY or MM-YY.

How does Shopify do?

Shopify conforms to the format.

How do I implement this?

No action needed.

11. Allow users to edit previous fields directly on the final review step

What does this mean?

There should be an easy way for users to edit info from previous steps, when they reach the review step. This needs to be on the same page, instead of links that backtrack users.

How does Shopify do?

Shopify does not implement this well. The final step of the Shopify checkout is the payment form. On the top area, the user finds links to edit contact and shipping info from previous steps. However, these links move the user to previous steps. So they force you to submit all the forms again, so you can get back to the final step.

How do I implement this?

Unfortunately, you can't do anything about this, even with Checkout UI extensions.

12. Provide separate edit links for each previous step on the final review step

What does this mean?

When the user reaches the final step, they've provided specific groups of fields. On that step, each of these groups should have an edit link. That is in contrast to having a link to edit multiple groups / steps at a time.

How does Shopify do?

Quite well. The final step has edit links to Contact, Shipping address, Method. These are all the individual steps the user has completed.

How do I implement this?

No action needed.

13. Don't use technical jargon on checkout texts

What does this mean?

While merchants or employees are familiar with some terms, the same might not be true for customers. Avoid using such terminology on the checkout. For example, don't say "CID", say "Security code".

How does Shopify do?

English texts on the Shopify checkout are doing well in this aspect. Terminology is easy to understand.

How do I implement this?

For the most part no action is needed. But if you find that you want to correct a text, you can use theme translations. Go to Online Store > your theme's actions dropdown > Edit default theme content.

14. Explicitly state if each field is required or optional

What does this mean?

To avoid confusion and errors, mark each form field as either required or optional.

How does Shopify do?

By default, Shopify only marks optional fields. If a field is required and the user submits the form without it, the error message is displayed afterwards.

How do I implement this?

You can edit every field using theme translations. Add the text "(required)" or an asterisk (*) after the name of every field.

15. The browser's back button navigates to previous steps

What does this mean?

Self-explanatory, the browser's back button navigates to the previous step in the form. It does not get the user back to the start of the checkout form, or even the cart page. This should be true for any step the user is at.

How does Shopify do?

Shopify implements this. The back button gets you to the previous step. The same is true for the forward button.

How do I implement this?

No action required.

16. Avoid using apply buttons, instead auto-update as the user types

What does this mean?

This mostly concerns the coupon / discount code field. Don't have an "Apply" button next to or under the field. Instead, user input should apply automatically. This event should also be visible, so that the user can tell that their changes applied.

How does Shopify do?

Shopify actually uses an apply button on the discount code field. What's even more of a problem is the mobile version. On mobile, the button becomes a small arrow. This makes it even easier for users to confuse its use.

How do I implement this?

You can do nothing to avoid this on the checkout flow. However, you can present the discount code field on the cart page or drawer. For this, you can use an app. Unfortunately, apps usually also display an Apply button.

Another option is to develop this with custom code. With this solution, the discount code will apply before the user reaches checkout.

Of course, you'll need to make sure that no other aspect of UX is harmed.

17. Choose the right interface for optional inputs

What does this mean?

First, completely remove any optional inputs that are unnecessary. Then, make sure that the remaining optional inputs (e.g. address 2) are not intrusive. This is because extra fields are more steps the user has to take, to complete the checkout.

How does Shopify do?

Shopify lets you remove some inputs, particularly company name, address 2 (e.g. apartment), and phone. But when you include these fields as optional, they are as intrusive as any other field. This is not ideal. For example, an optional phone input could be hidden behind a small button. When clicked, the phone field would then be visible.

How do I implement this?

Make sure that you remove any fields that are not necessary. You can do this from your checkout settings.

Shopify Plus stores also have the option of collecting some of this information in alternate ways. Checkout UI extension components can present optional fields with a much less intrusive interface.

18. Properly restrict and format localized fields

What does this mean?

An example of a localized field is the phone number. Different countries have different formats for the phone number. An optimized checkout experience formats user input (e.g. adds spaces), while considering the user's location. This helps avoid problems such as forcing the user to input a phone prefix that's not available in their country.

How does Shopify do?

Shopify uses the country field, which is in the same form as the phone field, to determine formatting. When you change countries, it detects the correct format for the phone number. Then it formats the number as the user types it, adding spaces or parentheses.

How do I implement this?

For the most part, you don't need to do anything. However, with Checkout UI extensions, Shopify Plus stores can have custom fields. You can develop these to control the format in any way you want, using the customer's location or country input.

Thanks for reading! If you need help optimizing your checkout, feel free to reach out using the contact form below.