> ## Documentation Index
> Fetch the complete documentation index at: https://nce-docs.bglobale.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Site Customization

The Site Customisation page describes the following:

* [Desktop vs Mobile Dimensions](/site-customization-330836#desktop-vs-mobile-dimensions-330836)
* [Accessing the Customization Page](/site-customization-330836#accessing-the-customisation-page-330836)
* [Configuring Your Shipping Banner Page](/site-customization-330836#configuring-your-shipping-banner-page-330836)

## Desktop vs Mobile Dimensions

### Overview

Global-e Site Customization screens may render differently on Desktop and Mobile devices. This section describes the Desktop versus Mobile differences for each of the four customizable screen types (Welcome Pop-Up, Country Switcher, Marketing Banner, and Checkout) including recommended dimensions, customization scope, and any mobile-specific behavior.

All four screen types support 27 languages. Edits made to one language do not update the others. For consistency, apply translated changes manually across all language versions.

Deliver your mock-up in one of the following formats:

* PSD
* XD
* Online design (e.g., [Zeplin](https://zeplin.io/))
* Image (PNG or JPEG recommended; other formats supported)
* PDF

### Tier Availability

The Desktop versus Mobile distinction applies across all merchant tiers (Enterprise, Pro, and NCE). However, which screen types a merchant can edit depends on their tier:

| Screen Type      | Enterprise | Pro | NCE |
| ---------------- | ---------- | --- | --- |
| Welcome Pop-Up   | ✓          | ✓   | ✗   |
| Country Switcher | ✓          | ✓   | ✗   |
| Marketing Banner | ✓          | ✓   | ✓   |
| Checkout         | ✓          | ✓   | ✗   |

NCE merchants are restricted to the Marketing Banner screen only. For Pro and Enterprise merchants, all four screen types are available, and the Desktop versus Mobile distinction described in this section fully applies.

### Shipping Banner

### Rendering Across Devices

The Shipping Banner renders identically on Desktop and Mobile. There is no separate Desktop or Mobile variant-the banner uses a fluid container that spans the full width of its parent element on every device. The same configuration (background color, height, font, and text color) applies to all viewports.

### Customization Scope

The following tables shows the customization scope:

| Element          | What is Customizable                |
| ---------------- | ----------------------------------- |
| Background color | Color of the banner background      |
| Banner height    | Specified in pixels by the merchant |
| Font             | Font family for the banner text     |
| Text color       | Color of the banner text            |

All four customization options apply equally to Desktop and Mobile.

### Styling Precedence Note

### Styling Precedence Note

If the container hosting the banner on the merchant's site includes its own CSS properties, the styling configured via the Site Customization editor may not take effect. In such cases, the merchant must adjust their container CSS to allow the banner styling to apply.

The following tables shows the recommended dimensions:

| Aspect | Value                                                              |
| ------ | ------------------------------------------------------------------ |
| Width  | 100% of the container (fluid; not configurable)                    |
| Height | Configurable in pixels by the merchant; no recommended fixed value |

## Accessing the Customisation Page

To customize your page configurations, you must access the **Customization** page.

1. Navigate to Configuration > Customization from the top menu:

   <Frame>
     <img src="https://mintcdn.com/globale-nce/HEMTL5jLmdt1JA9r/images/uuid-a899fa2b-72b7-cc6e-7841-916706a24ae9.png?fit=max&auto=format&n=HEMTL5jLmdt1JA9r&q=85&s=a3bf6922fbeee513dcf0e7045bd2aa17" width="1242" height="569" data-path="images/uuid-a899fa2b-72b7-cc6e-7841-916706a24ae9.png" />
   </Frame>
2. Select a merchant from the Merchant menu.

   The following page is displayed.

   <Frame>
     <img src="https://mintcdn.com/globale-nce/uDvROrO5ThNQJhEA/images/uuid-292ba159-d8bd-cbe7-422d-cfe547ed2176.png?fit=max&auto=format&n=uDvROrO5ThNQJhEA&q=85&s=14c26fdac453908c416202b61649933c" width="1114" height="610" data-path="images/uuid-292ba159-d8bd-cbe7-422d-cfe547ed2176.png" />
   </Frame>
3. Configure the elements above according to the table below:

   | No. | Element                                                                                      | Description                                                              |
   | --- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
   | 1   | Welcome Popup tab                                                                            | View, modify, and manage elements related to your Welcome popup screen.  |
   | 2   | Switcher Popup tab                                                                           | View, modify, and manage elements related to your Switcher Popup screen. |
   | 3   | [Free Shipping Banner tab](/site-customization#configuring-your-shipping-banner-page-714090) | View and modify your shipping banner page configuration.                 |

## Configuring Your Shipping Banner Page

From here you can view and modify your shipping banner page configuration. A live preview of your configurations is displayed on the right side of the page.

Note that you can reset your settings to their default configurations by clicking Reset to default at the bottom of the page.

<Frame>
  <img src="https://mintcdn.com/globale-nce/eLhOOxssApl6JeL0/images/uuid-b7a572e2-a5ad-6d95-73c0-5e439c2721f0.png?fit=max&auto=format&n=eLhOOxssApl6JeL0&q=85&s=a7ee59afb845aa78eee867fbc3255379" width="1192" height="569" data-path="images/uuid-b7a572e2-a5ad-6d95-73c0-5e439c2721f0.png" />
</Frame>

1. Follow steps 1 and 2 in [Accessing the Customisation Page](/site-customization#accessing-the-customisation-page-714090).
2. Click Free Shipping Banner.
3. Click Show banner on website.
4. Modify the Design settings section as needed.
5. Modify your list of countries (optional):

   1. Click list of countries.
   2. Select all of the relevant countries.
   3. Click OK.
6. Select a language from the language menu on the far right of the page.
7. Enter the text of your shipping banner message in the text field.

   <Note>
     The text in the curly brackets pulls information from the database.
   </Note>
8. Create an additional group of countries (optional):

   1. Click Create additional group of countries.
   2. Select a continent from the map.
   3. Select your countries from the Create a new group of countries panel.
   4. Click OK.
9. Click Save.