Hide countries

In Orbe, we do not recommend excluding countries for the following reasons:

1. Automatic Preselection: Our technology automatically preselects the country based on the user's location. Therefore, if your concern is that the list will appear too large, it's not an issue, as the user's country will already be preselected by default.

2. Maintaining user experience: We advise against hiding countries from the selector because if a country is included in the list, it's because it's configured as a country you ship to in your Shopify Markets settings. Thus, the customer can still place an order from that country when they reach the checkout. Excluding it from your country selector or geolocation popup only makes their experience more frustrating without any real benefit.

3. Shopify's localization structure: It's crucial to understand that on Shopify, localized experiences are based on countries and not markets. E.g. Even if you have a market for the EU with several European countries, each country has its own frontend experience in Shopify's backend and server rendering. This differentiation is necessary because each country within a region may have different shipping policies, product availability, or tax regulations.

Tutorial

Considering these factors, if you still wish to hide a country from the Orbe Geolocation Popup selector, you can do so by adding the following CSS:

.md-form__select__country__list li[data-country="XX"] {
    display: none !important;
}

Here, "XX" refers to the ISO two-letter country code. You can find a global list of country ISO two-letter codes at countrycode.org.

Example: Suppose you want to hide Germany, the United Kingdom, and Japan. You can achieve this with the following CSS:

.md-form__select__country__list li[data-country="DE"],
.md-form__select__country__list li[data-country="GB"],
.md-form__select__country__list li[data-country="JP"] {
    display: none !important;
}

This CSS will hide the specified countries from the Orbe Geolocation Popup selector. Remember to replace "DE," "GB," and "JP" with the appropriate country codes for the countries you want to hide.

If you want to achieve the same customization in the Market Selector, you can use a similar CSS approach.

To hide a specific country from the Market Selector, apply the following CSS:

.md-modal__footer-selector-modal__region-list li[data-country="XX"] { 
    display: none !important;
}

Example: Suppose you want to hide Germany, the United Kingdom, and Japan. You can achieve this with the following CSS:

.md-modal__footer-selector-modal__region-list li[data-country="DE"],
.md-modal__footer-selector-modal__region-list li[data-country="GB"],
.md-modal__footer-selector-modal__region-list li[data-country="JP"] {
    display: none !important;
}

This CSS will hide the specified countries from the Market Selector. Remember to replace "DE," "GB," and "JP" with the appropriate country codes for the countries you want to hide.

By following these steps, you can customize both the Geolocation Popup selector and the Market Selector to suit your specific needs. However, we recommend careful consideration before hiding countries to ensure your customers' best possible user experience.