The Checkout is generated and styled automatically according to the theme of your website, however it is possible to manually modify some settings on Global Styling, giving you full creative control on how the Checkout will look like. Find the Global Styling for the Checkout on the Global Styling editor, under the Shop Settings on the left side menu.
In this section, it is possible to change the general design of the product page. This includes spacing and background, in which you can set a solid color and a percentage of transparency, or you can choose an existing image from your library or your own computer.
2. Text Area - from Headline to Inputs
In all these sections, it is possible to change the design of the checkout text. The elements that can be changed are represented in the image below. The fonts can be customized in terms of color, size, family, weight, decoration, line height, if it should be uppercase, alignment and spacing in terms of margin and padding.
2.1. Billing and Shipping Page
2.2. Payment Page
The dividers are small lines that allow the separation of content on the checkout. The design of the dividers include their placement, thickness, color, style, width and spacing.
In this section you can style the Proceed button.
In this section you can define the placement of the button - to the right, centered or to the left.
In this section you'll be able to style the actual button. This includes the text, where the font can be fully customized, the background color and transparency, the border color, width, style and radius, and the spacing, in terms of margin and padding.