Shopify is the go-to eCommerce platform for non-technical store owners who want to easily create secure and attractive stores, with basic customization options. However, no matter how much a merchant tries to customize their site, they will often find that their checkout is the same as all of their competitors.
It’s no secret, Shopify’s checkout customization is limited. It’s one of the downsides you have to accept when choosing Shopify as your eCommerce platform. This isn’t to say that checkout customization is impossible, you just have to know what you’re doing. Below we’ll be discussing why the Shopify checkout is restrictive and the options you have to customize it.
Explaining Shopify Checkout Pages
Checkout pages are simply the pages that follow after a user clicks on their shopping cart or alternative checkout icon. Users on checkout pages are planning on editing their cart, viewing their wishlist (if you have this feature) or completing a transaction.
The URL of checkout pages used to be different than a normal Shopify site. These would display as checkout.shopify.com subdomain. A different domain on the checkout page could sometimes be negative. Whenever a site changes on a checkout page, the user is a lot less likely to trust that site, even a sudden redirect to a secure payment page can inspire discomfort, even when it’s purpose is the exact opposite.
Shopify domains are now different and will look like
https://www.(insertyoursitename).com/(randomly generated checkout ID)/checkout/
At the end of the URL you will also see another randomly generated number that is used to store any information concerning the cart, this information will be used for cart recovery.
For enterprise level Shopify stores using Shopify Plus, you will have more features to edit your checkout. Although at this point in your business, you will likely have considered having more options to customize your checkout through hiring Shopify developers.
Checkout Page Layout
Shopify checkout pages remain simple in design and layout. The layout is something you can’t change. Although you have the option to add a company logo, colors and change font size, it’s recommended you stay away from anything that is too high contrasting. This will only distract users from actually converting.
Desktops Or Tablets
On these devices, checkout pages are displayed in two header columns. The left side contains any field that needs to be filled: customer information (email address), shipping address, while the order summary will be displayed on the right side, with additional fields for gift cards and discount codes.
Mobile
On a smartphone, checkout pages will minimize layout to a single column.
Checkout Pages: What Customization Options You Do Have
Here we will go through all of the options you have to change the look of your checkout. After customizing anything in your checkout, remember to check how it looks on multiple devices.
Banner Image
Your banner image is an opportunity to upload an image reflective of your brand. The dimensions of the image are recommended to be 1000 x 400 pixels.
Logo
Many merchants will use a custom logo with a tagline, slogan or other messaging. The key thing here no matter how you customize it, is to ensure it’s clear, looks good in any size you may use it and is compatible with your theme.
Background Image in Main Content Area
This image is displayed just above your customer information and order summary columns. It’s another opportunity to implement the feel of your brand, but remember it shouldn’t distract customers from the checkout process so keep it simple. This image will also repeat itself vertically and horizontally, so if you’re not using an image that fits the exact dimensions of the space, tiled images are recommended.
Background Color
Changing the background color for any form fields or order summary. An appropriate background color is dependent on what the rest of your site looks like. Generally white is the safest pick, it ensures readability and generally looks clean. If you have no background image for your main content area, a good alternative is to fill that area with a solid background color.
Form Fields
You have two options to choose from, white or transparent. It’s recommended you pick whichever shows text the clearest.
Color for Form Field Errors
Red is recommended, in fact it’s a standard. However, if you have chosen a dark background color for your field column, red may not be as legible.
Background Image for Your Order Summary
Keep it light and simple! Alarm bells will ring if the customer cannot clearly read their order summary. Ever got to the end of your checkout to find that you accidentally added two of the same item or randomly added something else. Perhaps as part of a promotion you’re offering something free with orders, it’s important the user can see this and know it comes with no extra cost.
Typography
You have control over which typeface and corresponding font you have for all your body content and headings on your checkout pages. There’s a limited amount of fonts that you can use, it would be good to have more options, but the ones you are able to choose should do just fine.
Accent Color
Accents are used to highlight checkout steps, or any links in your checkout area. For example this could be a ‘Log in’ or ‘Shipping Options’ link.
Button Colors
You are limited to changing the button color for your next step, gift card and discount buttons. These buttons are the one part of your checkout pages which you do want to stand out. Bold high contrasting colors are positive here, they keep the user engaged in the checkout process.
Brand Alignment in Checkout Pages
Your banner, logo and colors are the main aspects of your checkout that you can customize to keep your store branding consistent. Be most scrupulous with these aspects, if these are different to the rest of your site, the user will likely bounce.
Checkout Pages: Things You Can’t Change
Here are all the aspects of your checkout which you can’t change if you’re not using Shopify Plus or you haven’t hired the services of a Shopify developer.
- Checkout page layout
- Adding or decreasing form fields
- The length of your checkout process (pages)
- Where your gift code or discount code fields are placed
- How the order summary column responds in mobile
- Whether you can include your site header with navigation options in checkout pages
- Greater customization within headers or content areas such as your logo, banners, promotional images and text
Why is the Shopify Checkout Limited?
Maintaining Compliance
ECommerce stores deal with personal and payment information. Other platforms have more customization options, but leave it upto you to ensure your store is compliant, operational and trusted to store or handle the information of your users. Shopify does this for you, but means you can’t customize areas that concern confidential data, i.e your checkout pages.
Store Protection
Poor customization can invite vulnerabilities to your checkout. Whether that be a malicious injection or third-party app. Keeping the majority of your checkout locked keeps you and your users safe.
It Converts Well
Of course, more checkout customization options could convert better, but if done wrong they could harm your sales. Shopify’s current checkout process works, this places more of the owness on your site design and the usefulness of your product(s) or service.
Checkout Research is Done For You
Merchants on alternative eCommerce platforms have to figure out what checkout works best for them. Shopify merges years of checkout research and implements it for you. Effectively, you’re trading in originality for a lot of money and time saved.
Testing Alternative Checkouts is Difficult
You would need a lot of high volume stores to agree to a different checkout process to guarantee whether an alternative checkout is useful. Shopify will have to change the checkout for the majority of merchants, so making big changes is hard to imagine and might not serve everyone.
Solutions: Getting Around Shopify Checkout Limitations
As stated earlier, not everything is set in stone and there are some ways to get more customization in your checkout. You have three main options:
- Upgrade to Shopify Plus (only viable for enterprise level stores)
- Hire a Shopify expert
- Use a checkout app to boost the functionality of your checkout
Let’s skip Shopify Plus, that is an option dependent on your business size and growth.
Hiring a Shopify Expert
You hire a Shopify developer when you need more functionality in your checkout, yet don’t have the expertise in-staff yourself. An expert will take care of all customization for you, leaving merchants to focus on what means the most, their products and making sales. Although it may cost a lot, and often hiring externally isn’t an option for startups. There’s no point in having an amazing checkout if you’ve gone bankrupt getting it.
Whoever you hire, remember to be patient. Check their experience, how long they’ve specialized in Shopify development and schedule a meeting to go over what you want. Are they actually listening to your project requirements? Are they providing a professional opinion in response? Are they well reviewed? (if they’re a freelancer on a site like Upwork.) If not, continue your search.
Using a Checkout App
There are plenty of apps that can give your checkout more customization options. Apps will often give your checkout a better interface, compatibility with more payment gateways and CRMs, more opportunities for cross-sells and upsells and even the possibility of the elusive one page checkout. They can do a lot, and are likely more cost efficient than upgrading to Shopify Plus or hiring a Shopify developer.
If you think using a checkout app is the best option for your Shopify store, I would recommend looking at Unify Checkout by CodeClouds. Their app is a user friendly yet quality way to boost your Shopify checkout options and has been developed by a team of experienced Shopify development team.
