> ## Documentation Index > Fetch the complete documentation index at: https://docs-stage.bglobale.com/llms.txt > Use this file to discover all available pages before exploring further. # Page Design ## Page Design ### Customizing the Checkout and Confirmation Pages This section details the items that are customisable on both the Checkout and Confirmation pages. * [Checkout page](/page-design#checkout-page) * [Confirmation page](/page-design#confirmation-page) You can use this [Figma page](https://www.figma.com/design/GxlxGPBTZb1D4x2fGXZgiS/Global-e-Classic-Checkout-Confirmation-Pages-for-merchants?node-id=0-1\&p=f\&t=ver2vtyaOIO1Yctn-0) 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](/site-customization-storefront#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 page structure](/page-design#desktop-checkout-layout-structure) * [Mobile checkout page structure](/page-design#mobile-checkout-layout-structure) #### 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 | 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](/page-design#desktop-confirmation-page-example) * [Mobile confirmation page example](/page-design#mobile-confirmation-page-example) #### 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: