[Cross Border] Documentation

Language and currency footer selectors: UI guidelines

See Partner Guidelines doc for multi-currency and multi-language support

Language and currency selectors help buyers shop in the currency and language they want. All themes should include them. These guidelines will help you implement selectors in your theme(s).

The language and currency selectors should match your theme's design, and must be displayed in the same footer location consistently across all pages. To meet buyers’ expectations, we require placing selectors in the footer. Our user research shows that buyers find selectors in the footer to be more discoverable than when selectors are hidden from view in the navigation menu. The selector’s dropdown menu should also match your theme’s design and must be accessible to screen readers.

Selectors styling

Borrow the theme’s existing dropdown selector styles wherever possible, including typography, colours, height, and any hover states.
If necessary, adjust the size of the language and currency selectors to achieve visual balance with the other footer elements.

Dropdown menu styling

We recommend the menu to appear in the form of a popover instead of a modal because a modal can be heavy-handed if merchants only have a few enabled languages and/or currencies (e.g. two or three options).

Do

The language and currency menus’ default, hover, focused, selected and pressed states (on small screens) should match your theme’s link patterns.
For long strings, the menu’s width should expand to fit the menu content.
The menu’s height and width should be adjusted for small screens so that the menu’s content is never off the viewport.

Don’t

For long strings, the content must not wrap.
Country flags must not be associated with a language due to political sensitivities regarding languages tied to countries and regions
Country flags should not be associated with currencies because a currency could be used across multiple countries and regions (example: EUR €).

Selectors placement

Do

On small screen web, selectors must be at the top of the sub-footer section, above payment and copyright information.
Language and currency selectors must be in the same location because they share a similar function. Buyers may not expect to find another selector in a different location.

Don’t

Do not place selectors near footer menu links, because currencies and languages are not unique pages that you can navigate to.
On small screen web, the selectors should not fall below your store’s copyright information.

Alternative placements

If your theme has a currency selector in a different area (i.e. navigation menu, header), and you wish to continue displaying it in this location, use the new currency selector and place the language selector in the same location. The two selectors must never be located in different areas. All selectors should share the same visual styles for consistency. Please note that you are still required to display both selectors in the footer as well.

Selectors setting

Do

The default required theme settings (settings, content and links) for currency and language should mirror how they’re set up in the Debut theme.
The selectors settings must be shown in the relevant section e.g. footer selector settings in the footer section, and header selector settings in the header section.
There must be a setting to show or hide the selectors. The selectors should be shown/checked by default.
Language and currency selector settings must be separate so merchants can edit them independently.
If you choose to use flags (not recommended), flags must only be used for the currency selector and must include a setting to hide them.

Don’t

The language and currency selectors must not be located in the general theme settings. Merchants typically navigate to the section where they expect to find a feature located on their online store.
The language selector must not have country flags, since languages can be spoken in multiple countries.