Country and language selector UX guidelines
There are two main considerations for including country and language selectors in your theme:
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
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
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:
Don't do this
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:
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.
You shouldn't include country flags in your selectors as both languages and currencies can apply to multiple countries.