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.
Access Checkout Theme Settings
Step 1: Log in to your Shopify Admin > Online Stores > Themes, then click on Customize to edit your Theme.
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.