# Country Order Customization

## **Geolocation Popup**

In Orbe, the country list within the selector is alphabetically ordered by default. However, it's possible to customize this order using CSS, allowing you to prioritize certain countries by placing them at the top of the list.

For example, in this country selector, you can see that the United States and the United Kingdom are at the top when you open the selector:

<figure><img src="/files/LtkwbFltuTdPZz5mpLxA" alt=""><figcaption></figcaption></figure>

Here's a step-by-step guide on how to achieve this through Custom CSS:

**Step 1: Modify the Display of the List**

To start, we need to change the display setting of the country list to a grid layout. This allows us to reorder the countries:

```css
.md-form__select__country__list {
    display: grid;
}

.md-form__select__country__list[hidden] {
    display: none;
}
```

**Step 2: Set Default Order**

Next, set a default order for all countries in the list. This ensures that any country not explicitly reordered will follow this default setting:

```css
.md-form__select__country__list li {
    order: 2;
}
```

**Step 3: Reorder Specific Countries**

Now, you can select specific countries and assign them a different order. In this example, we're moving the United States (US) and the United Kingdom (GB) to the top of the list:

{% code overflow="wrap" %}

```css
.md-form__select__country__list li[data-country="US"], .md-form__select__country__list li[data-country="GB"]{
    order: 1;
}
```

{% endcode %}

By adding these CSS classes, you can easily customize the order of countries within the Orbe selector.

Simply replace "GB" and "US" with the country codes of your preferred countries to tailor the list to your needs. This refers to the ISO two-letter code (alpha-2) of the country. You can find the global list of country ISO two-letter codes at [https://countrycode.org/](https://countrycode.org).

### CSS

Here's the complete CSS snippet for repositioning the United States and the United Kingdom at the top of the list:

```css
.md-form__select__country__list {
    display: grid;
}

.md-form__select__country__list[hidden] {
    display: none;
}

.md-form__select__country__list li {
    order: 3;
}

.md-form__select__country__list li[data-country="US"] {
    order: 1;
}
.md-form__select__country__list li[data-country="GB"] {
    order: 2;
}
```

With this customization, you can enhance the user experience by highlighting the most relevant countries for your business.

{% hint style="info" %}
**Accessibility tip**: if countries are visually reordered with CSS, the underlying order in the code (DOM) stays the same. This isn’t fully compliant with accessibility standards (WCAG 2.2 – Meaningful Sequence, Level A). We know highlighting certain countries is important and are working on a solution that allows this without affecting accessibility.
{% endhint %}

### JavaScript

You can also achieve this by using this JavaScript code and adding it to your theme code:

```javascript
document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        const countryList = document.querySelector("#orbeCountryList");
        const priorityCountries = ["US", "GB"];
        // Loop through each country in reverse order and move it to the top
        priorityCountries.reverse().forEach(countryCode => {
            const countryItem = countryList.querySelector(`li[data-country="${countryCode}"]`);
            if (countryItem) {
                countryList.insertBefore(countryItem, countryList.firstChild);
            }
        });
    }, 1000);
});
```

## Popup Selector

In Orbe's **Market Selector** Popup, you can customize the country order using CSS.

Unlike the Geolocation Popup, the parent container already uses a `grid` display by default, so **you only need to adjust the order of the individual items**.

<figure><img src="/files/mGOF5ol765dCAZDVgljw" alt=""><figcaption></figcaption></figure>

Set all items to a default order and prioritize the desired countries:

```css
.md-modal__footer-selector-modal__region-list-item {
    order: 3;
}

.md-modal__footer-selector-modal__region-list-item[data-country="FR"] {
    order: 1;
}

.md-modal__footer-selector-modal__region-list-item[data-country="ES"] {
    order: 2;
}
```

In this example:

* France (`FR`) appears first.
* Spain (`ES`) appears second.
* All other countries are shown below.

Replace the country codes (`ES`, `FR`) with your preferred ISO alpha-2 codes as needed. You can find the global list of country ISO two-letter codes at [https://countrycode.org/](https://countrycode.org).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.orbe.app/developer-reference/snippets/country-order-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.