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 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:

Installment prices

Itemized prices

Unit prices