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.
Use the theme editor to include a banner and display your logo, as well as customize the main content area, typography, and colors for the checkout page.
There is also a workaround for concealing Express checkout buttons that involves theme file changes.
Access checkout page settings in the theme editor
Go to your theme in the Online Store and select Customize. Then select Theme settings > Checkout.
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.
Remove additional checkout buttons from the cart page and checkout
Naturally, the clear approach for removing the additional checkout buttons would be to remove the corresponding payment provider. However, it may be the case that the payment providers are still needed as payment types, but the buttons are conflicting with added apps or customizations. If this is the case with your store, consider completing this modification.
- Activate dynamic checkout buttons in the theme editor
- Save
- Select Theme actions, then Edit code
- Open your CSS file (theme.css.liquid)
- Place this code at the bottom of the CSS file:
/* hide additional checkout buttons */
.additional-checkout-buttons{display:none;}
/* end */
