How to customize the Checkout Page

This article will walk you through steps on how to edit your Shopify Checkout Page. For the Shopify's guidance, click here

About the Checkout Page

The checkout page is the most important component of each customer’s journey because it is where they pay for the required products or services.


The checkout page template is generated by Shopify and cannot be accessed by most Shopify users through the editor. If you have a Shopify Plus account, you can totally customize the layout of the checkout page using the checkout.liquid and checkout.scss.liquid files in your Shopify store admin panel's theme editor sections. Meanwhile, Basic Shopify, Shopify, and Advanced Shopify merchants have little control over how the checkout looks. 


This article will show you some basic settings of the checkout page that can be controlled through the Theme Settings.

Please note this is a limitation of both Basic and Advanced Shopify plans and not your EcomSolid theme.
Read our blog post for detailed guidance and ideas on how to customize the Shopify Checkout page to reduce cart abandonment.

Access Checkout Theme Settings 


Step 1: Log in to your Shopify Admin > Online Stores > Themes, then click on Customize to edit your Theme.



Step 2: Select the Checkout page from the drop-down menu at the top bar and click on "Open checkout settings". You will see the configurations revealed on the right sidebar. 



Customize the Checkout Page Settings


The Banner is located at the top of your checkout page. Under the Background image section, click on “Change” to update the image as you want.



Display your logo

To add your store’s logo to the Checkout page, hit the “Upload Image” button under the Custom image field.



After that, use the provided dropdowns to adjust the Position and Logo size.

Main content area

The main content area is the left side of the checkout screen where a customer provides information for their orders. To add a custom background for this section, click on Select to upload an image. Otherwise, use the Background color picker to select a background color.


Form fields: There are two color options for you to choose at this point - White and Transparent.



Order summary area

The Order summary is located on the right side of the Checkout page. Customers use this area to review the details of their orders. Upload a background image (Select) or use the color picker to select a background color.





Determine the Headings and Body font for the checkout page by selecting your preferred fonts from the dropdowns.




Select the color or enter the hex color code for the Accents, Buttons, and Errors in the corresponding fields.





Need more help? Feel free to reach out to our Customer Support Team via email and live chat!

Was this helpful?