Global Styling the Checkout

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.

 

1. General

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

 

Changing the style of the "I accept the terms" link

The "I accept the terms" link towards the bottom of the page inherits styling from your website's global link styling. If you wish to change its appearance, you can do so from Global Styling > Layout Settings > Body > Links. Be aware that this changes the styling of all the links on your website, not only on the billing and shipping page.


2.2. Payment Page

 

3. Divider

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. 

 

4. Button 

In this section you can style the Proceed button.

 

4.1. Content

In this section you can define the placement of the button - to the right, centered or to the left.

 

4.2. Styling

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. 

 

Anything we’ve not covered?

Contact Us