If you’re a Shopify merchant, you’re likely always on the hunt for ways to stand out from your competition and offer your visitors and customers a positive and memorable experience. Plus, with 95% of purchases expected to be made online by 2040, that competition will be fierce. Aside from using valuable integrations with complementary apps, one way to do this is through the Shopify customize checkout feature for your store. Read on to learn what this is, what it can do for you, and how to use it, including by integrating a post-purchase app like Cross Sell.
Customize Shopify Checkout with Cross Sell
NO CREDIT CARD REQUIRED
Can you customize checkout on Shopify?
Your checkout pages are found at yourdomain.com, followed by a number and “checkouts”. Because of security, compliance, and regulatory issues, these pages aren’t too flexible when it comes to customizations (at least as a Shopify merchant with the regular store). Plus, since Shopify uses the same checkout pages throughout most of its stores, the checkout process has been refined for conversion optimization.
Although you’re able to customize the cart page with the theme editor or by directly altering the cart-template.liquid file, this isn’t always helpful since some Shopify stores simply bypass the cart page and automatically bring visitors to the first checkout page instead.
However, there are a few basic changes you can make to your checkout page’s main content, banner, logo, and order summary. For example, if you’re using Express Checkout: the text that says “Or” under the alternate payment options (which are branded buttons for Google Pay, Apple Pay, Shop Pay, PayPal, or Amazon Payments). But why would you want to do this and what makes it important?
If customers don’t want one of these options and prefer to pay directly by credit card, they could easily miss the default light and small text under these buttons that indicates they can indeed pay by credit card (they have the opportunity at a later step). If this happens, you run the risk of them abandoning your site and their purchase.
So, changing the word “Or” to provide more information can be helpful! For instance, it could say, “To pay by credit card, please continue” or something similar.
Do you have to be a Shopify Plus member to edit checkout?
The answer is yes and no. Anyone can make basic changes to the main content area, logo, banner, and order summary on the checkout page. But, to totally edit the layout of your checkout page you must be a Shopify Plus member. With this account, you’ll get access to two extra files in the theme editor of your admin panel, checkout.liquid and checkout.scss.liquid.
How many types of checkouts can a merchant set up in Shopify?
You can set up two different Checkout types in Shopify:
Standard
This is the default Checkout version and automatically gets Shopify’s periodic updates and new releases. It’s enabled if the checkout.liquid file isn’t.
Maintenance
When checkout.liquid is enabled, the Maintenance type is used. This version is frozen at a set time and is a stable version of the Standard checkout, meaning it doesn’t get updated automatically. To access new features and updates, you would:
- Revert back to the Standard checkout type by disabling access to checkout.liquid.
- Wait for the Maintenance checkout version upgrade and follow the prompts to complete the process.
How to edit the Shopify checkout page
To edit the Shopify Checkout page, follow these steps:
- Navigate to “Online Store” in the Theme section of your Shopify store’s admin panel.
- Choose “Customize” to work with and change different elements of the theme.
- Select “Checkout”, located on the theme navigation’s left-hand side.
- Update the various available elements on your checkout page (Banner, Logo, Main Content Area, and Order Summary).
- If you’re a Shopify Plus member, you can make more updates to the theme layout.
- Hit “Save” to finish the process.
Checkout page customizations
Using the theme editor, it’s easy to customize your Shopify Checkout pages style by adding your store’s logo, changing its colors, or using a different font for a cohesive look and feel with your business.
It might be tempting to go design and color-crazy to attract attention to your checkout pages. But, it’s best to save this approach for other pages and areas of your store and keep your checkout pages simple – since your customers are just looking to enter order payment and shipping details, they might get frustrated or confused by any hard-to-read text or other impediments to completing these tasks. Best practices include using high-contrast colors and subtle images that don’t distract from the text – especially since the Checkout page text is going to give important direction and guidance to complete an order.
How to customize Shopify checkout options
Follow the steps and tips below to customize different aspects of your Shopify Checkout pages.
These steps are for desktop users. If you’re using an iPhone or Android, please visit Shopify’s help page.
Most checkout options will be done from the Settings menu in the admin panel, and then selecting Checkout:
Banner/Header
To change the banner background image showing your store’s name at the top of each checkout page, pick an image that matches your brand and is of 1000 x 400-pixel resolution. Then:
- In your admin panel, go to “Settings” and “Checkout”.
- In the Style area, choose “Customize checkout” – this will open the theme editor.
- In the “Banner” area, select “Upload image”, or choose one from your library.
- Hit “Save”.
Logo
Your logo can be added on top of your banner image and to the left, right, or center of the checkout pages’ banner area. To modify your logo:
- In your admin panel, go to “Settings” and “Checkout”.
- In the Style area, choose “Customize checkout” – this will open the theme editor.
- In the “Logo” area, select “Upload image”, or choose one from your library.
- Choose a position and a size for the logo.
- Hit “Save”.
Main content area background image or color
The main content area is where your customers enter their payment and shipping details, so when adding your background image or color (you can’t have both), it’s critical to check that you can still clearly read the fields on the background. To do this:
- In your admin panel, go to “Settings” and “Checkout”.
- In the Style area, choose “Customize checkout” – this will open the theme editor.
- In the “Main content area” section, add your background image or color.
- Color: choose the box beside “Background color” to open the color picker, from which you can choose your color or enter a hexadecimal code.
- Image: select “Upload image” or choose one from your library.
- Hit “Save”.
Form field color
Field color can be changed to white or transparent (which is helpful to make background images show up). When you’re doing this, be sure you can clearly read the field text and follow these steps:
- In your admin panel, go to “Settings” and “Checkout”.
- In the Style area, choose “Customize checkout” – this will open the theme editor.
- In the “Main content area” section, select the “Form fields drop-down” to choose your color.
- Hit Save.
Custom text
To edit text and add custom text to Shopify Checkout, follow these steps:
- In your admin panel, find “Online Store” and “Themes”, then select “Actions” and “Edit languages”.
- From there, on the tabs across the top (which vary depending on your theme), look for something that relates to Checkout. It might be better to search rather than scrolling through since the file is often long. Do so with “command or control + F” and enter “checkout”, then find the field containing the text you’re looking to change.
Order Summary background image or color
For the background image or color on your Order Summary page, you have the choice to change the field color to transparent or white. Transparent is a great option if you’re using a background image because you won’t have to worry about whether it will show up. Whatever you decide, just be sure the text in each field is clearly readable. To make these changes, follow these steps:
- In your admin panel, go to “Settings” and “Checkout”.
- In the Style area, choose “Customize checkout” – this will open the theme editor.
- In the “Main content area” section, choose the “Form fields” drop-down and pick the color you want.
- Hit “Save”.
Add features to the post-purchase page at checkout
A great perk of the Checkout post-purchase page on Shopify is the ability to add features to it. These can be anything from customer surveys to videos, to cross-sell and upsell offers. These types of post-purchase offers are related and helpful recommendations to the customer, based on what they’re already buying, and come up just before their confirmation page so they can easily add them to the order. The process to set these offers up is simple and easy with a tool like Cross Sell.
To add features to your post-purchase page using a checkout app like Cross Sell, choose the app in your Checkout settings. To do so:
- Navigate to the Shopify App Store and find the right post-purchase app for your store, like Cross Sell.
- Select “Add app” and log in to Shopify through the prompt if you aren’t logged in already.
- Hit “Install app”.
- Navigate in your Shopify admin panel to “Apps” and select Cross Sell or the post-purchase app you installed.
- Enter details for any configuration settings that might be needed.
What about Checkout Liquid?
Checkout Liquid is a theme or layout process for Shopify Plus merchants. Using the self-contained file checkout.liquid, this process doesn’t need extra template files. It includes these steps for your store:
- Inventory issues
- Customer information
- Shipping method
- Payment method
- Review order
- Processing/forwarding
- Order status
How do you edit Checkout Liquid?
To edit Checkout Liquid:
- Navigate to “Online Store” in the Theme section of your store’s admin panel.
- Select “Edit Code” from the “Actions” drop-down in the Current Theme section.
- Choose checkout.liquid file (or checkout.scss.liquid file for style) to make your updates.
- Select “Preview” so you can review your changes.
- Hit “Save” to finish the process.
These tips and tricks to customize Checkout will help you elevate your Shopify store to the next level and differentiate it from your competition. Using a post-purchase app like Cross Sell to offer cross-sells and upsells can make a huge difference in your customers’ experience, too.
Try Cross Sell, free for 14 days
NO CREDIT CARD REQUIRED
