Page Design

Customizing the Checkout and Confirmation Pages

This section details the items that are customisable on both the Checkout and Confirmation pages.

You can use this Figma page to make any customizations that you require. Duplicate and modify the file as needed.

The checkout page layout is fixed (it cannot be changed).

For information about customizing your Checkout page, see Configuring Your Checkout Page.

Checkout Page

The Checkout page shows the following:

Order Summary
Billing and Shipping Addresses
Shipping Method
Billing Summary and Payment

The following figure shows the Desktop Checkout page:

The following figure shows the Desktop express checkout payment buttons:

The following figure shows the Mobile Checkout page:

The following figure shows the Mobile express checkout payment buttons:

Checkout Page Layout Structure

This page describes the following page layout structures:

Desktop Checkout Layout Structure

This section describes the layout (structure) of the Desktop Checkout page and customisable elements. The Desktop Checkout page has been divided into its main elements, with each region described separately. The table on the right describes the Order Summary area below:

No.	Element	Description
1	Background color	The background color of the entire page.
2	Language selector	The text front and dropdown input style.
3	Title header	The ribbon background color, text font, and text color.
4	Order Summary area	Font-face, size, and color.
5	Product name	Font-face, size, and color.
6	Product attributes	Font-face, size, and color.
7	Quantity, price, and total	Font-face, size, and color.

The table on the right describes the Express payment section:

No.	Element	Description
1	Express payment section	Section background, font-face, size, and color.

The table on the right describes the Billing Address area below:

No.	Element	Description
1	Background color	The background color of the page.

The table on the right describes the Payment area below:

No.	Element	Description
1	Billing Summary area	The following: Input text: font-face, size, and color Drop-down and floating labels option
2	Field titles and values	Font-face, size, and color (can be different for titles and values).
3	Total title and value	Font-face, size, and color (can be different for titles and values.
4	Pay button	The button background, font-face, size, and color.

The Desktop checkout page layout is fixed (it cannot be changed).

Mobile Checkout Layout Structure

This section describes the layout (structure) of the Mobile Checkout page and customisable elements. The Mobile Checkout page has been divided into its main elements, with each region described separately. The table on the right describes the Order Summary area below: The table on the right describes the Order Summary area below:

No.	Element	Description
1	Background color	The background color of the entire page.
2	Language selector	The text font and dropdown input style.
3	Title header	The ribbon background color, text font, and text color.
4	Product name	Font-face, size, and color.
5	Product attributes	Font-face, size, and color.
6	Quantity, price, and total	Font-face, size, and color.
7	Total price of all products	Font-face, size, and color.

No.	Element	Description
1	Express payment section	Section background, font-face, size, and color.

The table on the right describes the Billing/Delivery Address area below:

No.	Element	Description
1	Text and menu fields	The following: Input text and drop-down: font-face, size and color Optional - Floating label option

The table on the right describes the Billing Summary area below:

No.	Element	Description
1	Field titles and values	Font-face, size, and color (can be different for titles and values).
2	Total title and value	Font-face, size, and color (can be different for titles and values).
3	Duties and taxes note	Font-face, size, and color (can be different for titles and values).

The Mobile checkout page layout is fixed (it cannot be changed).

Confirmation Page

The Confirmation page shows the page displayed after a merchant’s order has been confirmed.

The Confirmation page layout is fixed (it cannot be changed).

This page describes the following Confirmation page examples:

Desktop Confirmation Page Example

The following figure shows a Desktop Confirmation page example:

Mobile Confirmation Page Example

The following figure shows the Mobile confirmation page example:

​Page Design

​Customizing the Checkout and Confirmation Pages

​Checkout Page

​Checkout Page Layout Structure

​Desktop Checkout Layout Structure

​Mobile Checkout Layout Structure

​Confirmation Page

​Desktop Confirmation Page Example

​Mobile Confirmation Page Example

Page Design

Customizing the Checkout and Confirmation Pages

Checkout Page

Checkout Page Layout Structure

Desktop Checkout Layout Structure

Mobile Checkout Layout Structure

Confirmation Page

Desktop Confirmation Page Example

Mobile Confirmation Page Example