Price display UX guidelines
Multiple currencies can use the same currency symbol, such as
$, which can make it difficult for customers to know which currency they're browsing in. To help prevent this confusion, you can use explicit currency formatting which shows the currency code with the price.
To include this behavior in your theme, do the following:
- Create a theme setting to allow merchants to choose whether to show the currency code.
- Follow the guidelines for updating price displays.
Create a currency code theme setting
You should create a theme setting to allow merchants to choose whether the currency code is included in price displays:
With the setting in place, you can update theme price displays to show the currency code, or not, depending on the setting:
Guidelines for updating price displays
Most price displays should be updated to reference the setting from the previous section, however there are two display categories that should have their currency formatting hardcoded:
- Displays that should always use explicit currency formatting
- Displays that shouldn't use explicit currency formatting
Displays that should always use explicit currency formatting
Cart and checkout totals should always use explicit currency formatting so that there's no confusion for customers when they place an order.
Displays that shouldn't use explicit currency formatting
The following price displays have enough surrounding context for customers to safely infer the currency, and the shorter format is a better fit within the display: