While Shopify themes will give a unique look to your online store, some new Shopify store owners may be surprised to learn that all checkout pages look relatively the same.
What are Shopify checkout pages?
Checkout pages are a series of pages that shoppers see once they click the “checkout” button on either the cart page, a “mini cart” popup-style cart or inline Ajax-powered “added to cart” confirmation message.
Previously, the URL would change to the checkout.shopify.com subdomain, but Shopify thankfully changed this so that users stay on your domain name once the checkout process starts.
Now, the domain should look like https://www.your-domain-name.com/1234567890/checkout, where “your-domain-name.com” is your store’s domain and the 1234567890 is a randomly assigned number.
At the end of checkout URLs, you’ll also see a long string of characters. This represents a unique, randomly generated identifier that is used to store the contents of the cart and other information that is mainly used for cart recovery features.
Subscribers to the Shopify Plus enterprise level service have advanced capabilities to edit the checkout pages, but most Shopify users will not.
The checkout pages
In Shopify, checkout pages have a simple layout and design.
On desktop and larger landscape tablet devices, the pages contain two columns with a header. Most of the fields that customers need to fill in are on the left side, while an order summary appears on the right along with gift card and discount code fields.
On mobile, the design shifts to a one column layout that retains the header.
By contrast, the order summary, as well as the discount and gift card field, are “hidden” in a collapsible panel, while most of the fields that customers interact with are displayed in the area below.
What you can control on Shopify checkout pages
While the basic layout of the Shopify checkout, as outlined above, can’t be changed, you do have some control over how the checkout looks.
- Banner image: Here you can upload a custom image that reflects your brand. In general, a 1000 by 400 pixel image is recommended. Since the image could become cropped based on the screen size of a customer’s device, it’s a good idea to avoid images that contain text or any images that may look awkward if they become cut off.
- Logo: Here is your chance to include your brand’s primary element. Make sure your logo is clear and easy to see. Some store owners use this position to include a tagline, slogan or other messaging here. While this can be a good strategy — be sure to test how this looks and reads at all sizes.
- Logo size: This option lets you select how big the logo is. Since “small” and “large” are somewhat arbitrary, it’s a good idea to test this setting as well.
- Main content area background image: This image appears behind the main content area on the left and is another chance to integrate your look and feel. Keep in mind that form fields appear on top of this, so the image should be kept simple. This image will repeat both vertically and horizontally, so tiled options work better.
- Background color: Select the background color for the left column if you don’t have a background image. In general, using a solid background color is a safer, cleaner way to go for checkout pages, unless you have a subtle pattern or texture that matches your brand.
- Form fields: You can choose either white or transparent.
- Order summary background image: You also have an option to include a background image behind the order summary column. Remember, keeping this image light and simple is best.
- Background color: Select the background color of the order summary area if a background image is not used.
- Typography: You can choose the font for all headings and all body copy in the checkout. Unfortunately, there’s a limited number of fonts that can be used, unlike the advanced Shopify font picker.
- Accent color: This color is used for links, highlights, and checkmarks in the checkout area. Pick a color that’s prominent in your brand and contrasts with any background images or colors.
- Button color: The background color of the gift card, discount, and next step buttons. For legibility purposes, this color should be bold and high contrast.
- Errors color: This color is for warnings and invalid field errors which should also be prominent. Red is a common option, but if you’re using a dark background, it can be difficult to read.
- You can also control a variety of settings under Settings > Checkout, such as extra form options.
You can also control what text is shown in most areas of the checkout using these tips.
The best way for making the checkout process match your brand are the banner, color options, and logo, so take advantage of these.
As with anything in Shopify, it’s always a good idea to test how your checkout looks on all devices for any issues that might cause a customer to abandon the checkout.
What you can’t control
Outside of the list above, making additional customizations to the checkout would require advanced development.
Here’s an overview of some common things that you can’t change within the settings:
- The general layout or structure of the page.
- Additional elements to the header or content areas — such as logos, trustmarks, banners, promotional images or text.
- The process, or what fields are required to complete the checkout.
- Switching to a “single page” checkout.
- How the “order summary” panel behaves on mobile.
- Moving the gift card or discount code input box (or most other fields). If you’re concerned about customers forgetting to add discount codes, consider using discount URLs.
- Adding your site’s full header with navigation.
Why is the Shopify checkout so limited?
So, why does Shopify restrict the layout of the checkout pages so much?
- Since checkout forms collect sensitive personal and payment information, there are certain legal or compliance reasons that Shopify needs to maintain tighter control over how these pages look and function.
- By “locking down” much of the checkout pages, Shopify is also protecting you from third-party apps or malicious code injections that might compromise the security of your site and open you up to substantial liability.
- Every day, this general layout is used across thousands of checkouts. Shopify occasionally experiments with different options on random checkouts, but in order for changes to be integrated across every Shopify store, they have to prove to be significantly more likely to convert. However, this happens very rarely.
- Because of this, you have the advantage of being able to use the best practices for checkout pages that have resulted in billions of dollars in sales across millions of shopping sessions.
- Getting enough traffic to test alternative checkout layouts would only be possible for extremely high volume stores.
- Shopify has also carefully designed its checkout pages to minimize distractions and make the customer focus on completing a purchase. For this reason, while you can keep your brand in the header, it’s not possible to have other elements included
Why doesn’t Shopify have single page checkout?
One of the most common requests from Shopify store owners is the ability to have a single page checkout. This feature is found in some other e-commerce solutions.
- The data over whether a single page checkout increases conversions is debatable.
- To this date, Shopify’s testing and analysis of millions of checkouts have not shown that a single page checkout would improve conversions.
- Shopify has included numerous features, such as advanced autocomplete for addresses and subtle animations designed to make the checkout process fast and efficient.
- When loading the payment information fields, Shopify thoughtfully uses “loading” animation effects to make the page seem more “active” and “dynamic.”
- Single page checkout solutions on non-Shopify platforms often still require the customer to wait briefly for additional information or content to load when proceeding through each step, so this is essentially becoming the same process Shopify customers see when checking out.
While Shopify doesn’t offer a single page checkout by default per se, it does leverage many of its features which results in a similar experience.
