The currency selector is responsible for switching currency on a certain store view. The country switcher is responsible for selecting of store view. By default appearance of these dropdowns depends on Magento 2 store configuration.

Where this element can be seen?

By default, elements are visible in the header. And on mobile screen devices above menu.

How should this element be designed?

Designs should represent currency and/or store switcher only in the case is requested by the client and the project is multi-store.

Switchers should represent in the expanded and collapsed view on mobile and desktop.

If dropdowns are not inheriting BT styles, hover effects should be displayed as well.

<aside> ℹ️ Usually, styling this element takes from-to: 4-6h

</aside>

Untitled

Untitled

How the design may look like?

Design example 1

Design example 2

How to develop styles for this element?

CurrencySwitcher component is responsible for rendering currency selector, StoreSwicther component is responsible for render of store selector.

By default, both switches are rendered in the Header in the top menu.

For mobile devices, both switchers are rendered as additional information above many in the Menu component.

Often designs are requesting to move the switcher to the main part of the header therefore refactor of render will be needed.

How the implementation may look like?

Implementation Example #1