Site Customisation
This section does not apply to Shopify. For information about Shopify, see Shopify Native. |
Design: Welcome Pop-up
Design on Desktop
Welcome Pop-up Customization On Desktop
Global‑e offers the option to customize the appearance and content of the Welcome Pop-up, aligning it with your brand identity and design.
This section details customisable items in the Welcome pop-up on the desktop.
Structure on Desktop
The following figure shows the structure of the Welcome pop-up and customisable items.
Customisable Items
The following table lists the Welcome pop-up items that can be customised. Merchants can have this pop-up set up as desired.
Note: If fonts are not Google fonts, the merchant has to provide the font files in ttf /otf format”.
# | Element | Customisable |
|---|---|---|
1 | Title | Font style, font size, font colour |
2 | Text | Font style, font size, font colour |
3 | Logo | Image |
4 | Background | Background colour, background image |
5 | Action Button | Font style, font size, font colour Button colour, button width, button height, button location coordinates (left, top) |
6 | Link | Font style, font size, font colour, link location coordinates (left, top) |
7 | Size | 7a. Pop-up height 7b. Pop-up width |
File Format
Make sure to deliver the mock-up in any of the following file formats:
PSD
XD
Online design (example: https://zeplin.io/)
Image (recommended: JPEG or PNG. Other formats are also supported.)
PDF
Screen Dimensions - Desktop
The following table lists the Global‑e element dimensions recommended for each relevant Merchant desktop screen or pop-up. Exception: The Welcome Mobile pop-up has a fixed size.
Desktop Dimensions
Element | Full Client Screen Size | Element Size |
|---|---|---|
Checkout / Confirmation | W: 1920 X H: 1080px | W: 1000px - auto height |
Welcome / Switcher pop-ups | W: 1920 X H: 1080px | W: 550 X H: 500px |
Examples
This section provides various customisation examples of the Welcome pop-up.
Design on Mobile
Welcome Pop-up Customization On Mobile
Global-e can customize the appearance and content of the Welcome Pop-up, aligning it with your brand identity and design.
Note
Following Google's Mobile Pop-up Penalty introduced in January 2017, the mobile welcome pop-up is now disabled by default. For merchants wishing to implement the mobile pop-up, we recommend following Google’s recommendations for “non-intrusive” mobile pop-ups.
This pop-up allows the customisation of font size, style, and colour as long as the dimensions are correct.
File Format
Make sure to deliver the mock-up in any of the following file formats:
PSD
XD
Online design (example: https://zeplin.io/)
Image (recommended: JPEG or PNG. Other formats are also supported.)
PDF
Recommended Screen Dimensions for Mobile
The following table lists the Global‑e element dimensions recommended for the welcome pop-up on mobile.
Note
The Welcome Mobile Popup has a fixed size.
The height of the mobile screen adjusts dynamically to the contents of the checkout and confirmation screens per specific device. (The checkout page has more content than the confirmation page; the height adjusts accordingly). Therefore, the value of the screen's height is not required.
Mobile Dimensions
Screen/Pop-up Width (px) (*) | Element size |
|---|---|
W: 375px | W: 340 X H: 180px – (*) Fixed size. |
File Format
Make sure to deliver the mock-up in any of the following file formats:
PSD
XD
Online design (example: https://zeplin.io/)
Image (recommended: JPEG or PNG. Other formats are also supported.)
PDF
Recommended Screen Dimensions for Mobile
The following table lists the Global‑e element dimensions recommended for the welcome pop-up on mobile.
Note
The Welcome Mobile Popup has a fixed size.
The height of the mobile screen adjusts dynamically to the contents of the checkout and confirmation screens per specific device. (The checkout page has more content than the confirmation page; the height adjusts accordingly). Therefore, the value of the screen's height is not required.
Mobile Dimensions
Screen/Pop-up Width (px) (*) | Element size |
|---|---|
W: 375px | W: 340 X H: 180px – (*) Fixed size. |
Welcome Pop-up on Mobile - Example
The Global-e default pop-up for mobile is displayed at the top of the screen.
Design: Country Switcher Pop-up
For added convenience, Global‑e offers the option to customize the appearance and content of the Country Switcher, aligning it with your brand identity and design.
Country Switcher Structure
The following figure shows the structure of the Country Switcher customisable elements.
Country Switcher Customisable Elements
The following table lists the Country Switcher pop-up elements that can be customised.
Note: If fonts are not Google fonts, the merchant has to provide the font files in ttf /otf format
# | Element | customisable |
|---|---|---|
1 | Title | Font style, font size, font colour |
2 | Text | Font style, font size, font colour |
3 | Logo | Image |
4 | Background | Background colour, background image |
5 | Drop-downs | Font style, font size, font colour, arrow style, background colour, location (next to the text/below the text) |
6 | Buttons | Each button can be customised differently Font style, font size, font colour, button colour, button width, button height, button location coordinates (left, top) |
7 | X (close) button - on/off | If the X button is part of the pop-up, the image of the button can be part of the background image, and button location coordinates (left, top). |
8 | Size | 8a. Pop-up height 8b. Pop-up width |
File Format
Make sure to deliver the mock-up in any of the following file formats:
PSD
XD
Online design (example: https://zeplin.io/)
Image (recommended: JPEG or PNG. Other formats are also supported.)
PDF
Recommended Screen Dimensions for Desktop
The following table lists the Global‑e element dimensions recommended for the country switcher pop-up on desktop screens.
Desktop Dimensions
Element | Full Client Screen Size | Element Size |
|---|---|---|
Switcher pop-ups | W: 1920 X H: 1080px | W: 550 X H: 500px |
Recommended Screen Dimensions Mobile
The following table lists the Global‑e element dimensions recommended for the switcher pop-up on mobile screens.
Note
The height of the mobile screen adjusts dynamically to the contents of the checkout and confirmation screens per specific device. (The checkout page has more content than the confirmation page; the height adjusts accordingly). Therefore, the value of the screen's height is not required.
Mobile Dimensions
Element | Screen/Pop-up Width (px) (*) | Element size |
|---|---|---|
Switcher Mobile Pop-up | W: 375px | W: 340 X H: 285 |
Country Switcher Pop-Up Examples
This section provides customisation examples of the Country Switcher popup.
Country Switcher and Welcome Pop-up Combined
Design: Checkout Page
Customizing the Checkout and Confirmation Pages
This section details the items that are customisable on both the Checkout and Confirmation pages.
Structure
Reviewing the Structure of the Checkout Page
The Checkout page includes the following sections:
Order Summary
Billing and Shipping Addresses
Shipping Method
Billing Summary and Payment
The following figure shows the layout (structure) of the Checkout page and customisable elements.
Note
The checkout and confirmation page layout is fixed (it cannot be changed).
Customisable Items
Reviewing the list of Customizable Items on the Checkout Page
The following table lists the items that can be customised.
Note: If fonts are not Google fonts, the merchant has to provide the font files in ttf /otf format.
# | Element | Customisable |
|---|---|---|
1 | Header Logo | image/HTML |
2 | Background | Background colour |
3 | Language selector | Text font, drop-down input style |
4 | Titles Area | Background colour, text font, and colour |
5 | Order Summary Area | 5a. Product Name – font-face, size, colour 5b. Product Attributes – font-face, size, colour 5c. Qty, Price, Total – font-face, size, colour 5d. Items Total – font-face, size, colour |
6 | Forms Styles | Input, text - font-face, size, colour drop-down |
7 | Billing Summary | 7a. Field titles and values – font-face, size, colour (can be different for titles and values) 7b. Total title and value – font-face, size, colour (can be different for titles and values) |
8 | Pay button | Button background, font-face, size, colour |
9 | Footer (Area containing links) | Width, background, font-face, size, colour |
Examples
Checkout Page
This section provides various customisation examples of the Checkout page.
Default Checkout page design:
Custom Checkout page design:
Confirmation Page
This section shows examples of the Confirmation page.
Default Confirmation page design:
Custom Confirmation page design:
