Country and language selector UX guidelines
There are two main considerations for including country and language selectors in your theme:
Anchor to Selector placementSelector 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.
The example images below only show a country selector, however the same guidelines apply to the language selector.
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:
Anchor to Near the customer account linksNear 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
Anchor to Near the cartNear 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
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:
Anchor to Selector stylingSelector styling
Custom selectors should borrow the theme's styling for dropdown selectors as much as possible, including typography, colors, height, and hover states.
You can create a custom component for your selector instead of using a native select element. When building a custom selector, you should implement it as a popover rather than a modal, since 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.
Anchor to Country and currency formatCountry 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 £).
