Customizing the Checkout Page

For most Shopify users, the checkout page template cannot be accessed from the template editor and is generated by Shopify. You will need to use "Edit Languages" to customize the checkout text, while you can use the theme settings to revise the colors and logo. Shopify Plus merchants do have access to the checkout.liquid file.

 

Merchants using Basic Shopify, Shopify, or Advanced Shopify have very limited control over how the checkout looks. This limitation also extends to the popup windows shown when a shopper uses a dynamic checkout button. In general, you can only change the colors, fonts, and select text and images on checkout pages.

 

Making advanced changes to the layout of any checkout page is not possible (this includes any of the pages shown after the user clicks "checkout" or a theme or permalink automatically starts the checkout process).

 

Please note this is a limitation of both Basic and Advanced Shopify plans and not your Shopify EcomSolid theme.

 

Where Can I Find the Checkout Theme Settings?

The Checkout page is largely beyond the control of the theme, as it is controlled by the Shopify platform. However, there are some cosmetic settings that can be controlled through the theme editor's Theme settings. 

Pixel Union cannot provide structural or functional changes for this page. If changes to Checkout page are needed but not included in these settings, reach out to Shopify Support to learn more about this page. 

 

Step 1: Log in to your Shopify Admin > Online Stores > Themes, then click on Actions and then choose Edit Theme.

 

Step 2: Choose Themes Settings > Checkout Page like in the screenshot. 

 

Include a banner

The Banner is the top section of the checkout screen where your store name appears.

 

 

Customize it by uploading a custom Background image. Click Select to locate the image and apply it as a background image.

 

Display your logo

To add your store’s logo to the Checkout page, upload a Custom image.

 

 

Use the provided dropdowns to adjust the Position and Logo size.

 

Customize the main content area

The Main content area is the left side of the checkout screen where a customer provides information for their order.

 

To use a custom background here, click Select to upload an image.

 

Alternatively, use the Background color picker to select a background color.

 

 

Select a form field color

There are two options for the color of the Form fields: White or Transparent.

 

 

Customize the order summary area

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

 

 

Customize the typography

Customize both the Headings and Body font for the checkout by selecting fonts from the provided dropdowns.

 

 

Customize the colors

Customize the Colors that appear on the Checkout page by clicking the rounded-rectangle swatch selectors beside the labeled categories.

 

 

 

For more information. Please follow up official Shopify tutorial 

 

 

Was this helpful?