There are two main considerations for including country and language selectors in your theme:

  - [Where to place the selectors](#selector-placement)
  - [How to style the selectors](#selector-styling)

## Selector placement

The following are the main locations you should place country and language selectors:

  - [The footer](#the-footer)
  - [Near the customer account links](#near-the-customer-account-links)
  - [Near the cart](#near-the-cart)
  - [Inside a navigation drawer](#inside-a-navigation-drawer)

Regardless of placement, if you have both country and language selectors, then they should always be placed together.

> Note:
> The example images below only show a country selector, however the same guidelines apply to the language selector.

### The footer

If you place the selector in the footer, then it should be placed at the top of the sub-footer content, separate from the footer navigation links:

<p>
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/footer-localization-desktop-02fbc15fd9a97a5b68f65c8cfec91226178f12574e33471f90cf2e21c00f5f4d.png" class="lazyload" width="1107" height="506"></figure>
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/footer-localization-mobile-b5f74f5d6f8819635f3c3ca41bc4bebec254e947262f15fa2024218f56efa466.png" class="lazyload" width="375" height="698"></figure>
</p>

### Near the customer account links

If the customer account links are placed near the cart, then the selector should also be placed near the cart. The style of the selector should be similar to the style of the customer account links. The following shows examples with customer accounts enabled, and disabled:

<p class="input">Customer accounts enabled</p>

<p>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/customer-account-01-41d3b58417c6d3282616b896bde12948ba02cce9921de4a8f335605273ab6249.png" class="lazyload" width="1440" height="145"></figure>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/customer-account-03-05212bc56b94568e1f17d00baabc92d46d716483982291908f8689e2ed2c39de.png" class="lazyload" width="1440" height="150"></figure>
</p>

<p class="input">Customer accounts disabled</p>

<p>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/customer-account-02-9016e3a3c79f9c331429644460aeec94fffb6acb20868504b371043a212091fd.png" class="lazyload" width="1440" height="145"></figure>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/customer-account-04-4cd0bf13a471369ff6c46b83a3301f870c3f2c96ead980a6bd9c3dfb7eeed41f.png" class="lazyload" width="1440" height="149"></figure>
</p>

### Near the cart

If the customer account links are widely separate from the cart, then the selector should be placed near the cart for better visibility:

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/grouped-selector-aac52b17f385234e3dfe6ab80b6f73bc6b2d197e61ba44222adfb96328632d2e.png" class="lazyload" width="1440" height="191"></figure>

The selector should complement, not compete with, the cart element on a page. If the cart element is on the right-hand side of the page, then the selector should be placed to the left of the cart to maintain ease of access for customers:

<p class="input">Do this</p>

<p>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/cart-currency-placement-01-b9479384ba1647a96d0e6c58cea870f381c53ac42c2558a86f6a8f7af5e91588.png" class="lazyload" width="1440" height="195"></figure>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/cart-currency-placement-03-48f04325c0450b12ebc82b7fa42d427ee14f4a666f1b181a0f13a7e01c0ca823.png" class="lazyload" width="1440" height="89"></figure>
</p>

<p class="input">Don't do this</p>

<p>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/cart-currency-placement-02-67c2209bf9d406cda8d047a54c8b0f875f6d4c2a1283f882c8319e02edb001a6.png" class="lazyload" width="1440" height="194"></figure>
  <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/cart-currency-placement-04-4e7efe38ad4442550838cc702d9d1237d0e84893dd5499efaddd358f3ac66dae.png" class="lazyload" width="1440" height="91"></figure>
</p>

### Inside a navigation drawer

If the selector is inside a navigation drawer, then it should be treated as a utility or footer link, as opposed to a navigation link:

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/nav-drawer-selector-8d3fca772c7f6c3f728c8b1e3fd083164fa1889c062f075ea35d9b22035724c8.png" class="lazyload" width="300" height="364"></figure>

## Selector styling

For accessibility purposes, you should create a custom component for your selectors. Native `select` elements can make navigation difficult for screen readers, and can lead to unexpected behavior for the user. Custom selectors should borrow the theme's styling for dropdown selectors as much as possible, including typography, colors, height, and hover states.

The menu component of your selector should be a popover, as opposed to a modal, as a modal can be excessive for cases where only a few options are enabled:

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/localization-select-popover-569947c2922fc6ccf404fb7317de7fca757d0881741fc72d7219f9e20563c624.png" class="lazyload" width="255" height="265"></figure>

The menu's default hover, focused, selected, and pressed states should match your theme's link patterns. The menu's width should expand to fit its content so that longer strings don't wrap, however, the menu display shouldn't extend beyond the viewport.

### Country and currency format

Your selector should include the full country name and include the currency code beside the currency symbol. For example, United States (USD $) and United Kingdom (GBP £).

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/internationalization/ux/country-selector-ux-example-cbbd427cab157e03aa24e9076883cd408ee5b3c8fc803bed252a37b919a524d3.png" class="lazyload" alt="Example of country and currency selector display" width="285" height="307"></figure>