Country and language selector UX guidelines
There are two main considerations for including country and language selectors in your theme:
Selector placement
Anchor link to section titled "Selector placement"The following are the main locations you should place country and language selectors:
Regardless of placement, if you have both country and language selectors, then they should always be placed together.
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:
Near the customer account links
Anchor link to section titled "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:
Customer accounts enabled
Customer accounts disabled
Near the cart
Anchor link to section titled "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:
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:
Do this
Don't do this
Inside a navigation drawer
Anchor link to section titled "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:
Selector styling
Anchor link to section titled "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:
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
Anchor link to section titled "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 £).
