Skip to main content

Customize Currency Formatting in Upcart

Control how currency is displayed in your cart using Shopify Markets and custom script settings.

Updated over 3 weeks ago

Overview

This customization lets you change how currency symbols and codes appear in your Upcart cart drawer. You can control whether to show the currency symbol (for example $), the currency code (for example USD), where they appear, and how they are spaced.

This setup requires that:

  • Your store is using Shopify Markets, or

  • You are working with a single market


Where to add the script

  1. Go to Upcart > Cart Editor > Settings > Custom HTML

  2. From the Select HTML Location dropdown, choose Scripts (Before load)

  3. Paste the script below into the input field

  4. Save your changes


Currency formatting script

<!-- Upcart Currency Formatting Script --> <script> // ~~~~~~START OF MERCHANT SETTINGS~~~~~~ let useCurrencySymbol = true; let useCurrencyCode = true; let currencySymbolPlacement = 'left';     // 'left' or 'right' let currencyCodePlacement = 'right';      // 'left' or 'right' let currencySymbolSpacing = false; let currencyCodeSpacing = true; let currencyFormat = "{{amount}}";        // Use Shopify's currency format // ~~~~~~END OF MERCHANT SETTINGS~~~~~~  formatCurrency();  function formatCurrency() {   let currencyMap = fillCurrencyMap(new Map());   let currencyCode = Shopify.currency.active;   let currencySymbol = currencyMap.get(currencyCode);    if (currencySymbolPlacement == 'left' && currencyCodePlacement == 'left') {     window.upcartMoneyFormat =       (useCurrencyCode ? currencyCode : "") +       (currencyCodeSpacing && useCurrencyCode ? " " : "") +       (useCurrencySymbol ? currencySymbol : "") +       (currencySymbolSpacing && useCurrencySymbol ? " " : "") +       currencyFormat;    } else if (currencySymbolPlacement == 'left' && currencyCodePlacement == 'right') {     window.upcartMoneyFormat =       (useCurrencySymbol ? currencySymbol : "") +       (currencySymbolSpacing && useCurrencySymbol ? " " : "") +       currencyFormat +       (currencyCodeSpacing && useCurrencyCode ? " " : "") +       (useCurrencyCode ? currencyCode : "");    } else if (currencySymbolPlacement == 'right' && currencyCodePlacement == 'right') {     window.upcartMoneyFormat =       currencyFormat +       (currencyCodeSpacing && useCurrencyCode ? " " : "") +       (useCurrencyCode ? currencyCode : "") +       (currencySymbolSpacing && useCurrencySymbol ? " " : "") +       (useCurrencySymbol ? currencySymbol : "");    } else if (currencySymbolPlacement == 'right' && currencyCodePlacement == 'left') {     window.upcartMoneyFormat =       (useCurrencyCode ? currencyCode : "") +       (currencyCodeSpacing && useCurrencyCode ? " " : "") +       currencyFormat +       (currencySymbolSpacing && useCurrencySymbol ? " " : "") +       (useCurrencySymbol ? currencySymbol : "");    } else {     console.warn("Unexpected placement configuration. Falling back to default.");     window.upcartMoneyFormat =       (useCurrencySymbol ? currencySymbol : "") +       (currencySymbolSpacing && useCurrencySymbol ? " " : "") +       currencyFormat +       (currencyCodeSpacing && useCurrencyCode ? " " : "") +       (useCurrencyCode ? currencyCode : "");   } }  function fillCurrencyMap(map) {   map.set('EUR', '€');   map.set('GBP', '£');   map.set('JPY', '¥');   map.set('AUD', '$');   map.set('CAD', '$');   map.set('CHF', 'CHF');   map.set('CNY', '¥');   map.set('INR', '₹');   map.set('RUB', '₽');   map.set('BRL', 'R$');   map.set('ZAR', 'R');   map.set('MXN', '$');   map.set('SGD', '$');   map.set('NZD', '$');   map.set('HKD', 'HK$');   return map; } </script>

Settings explained

Inside the script, look for this section:

// ~~~~~~START OF MERCHANT SETTINGS~~~~~~

You can adjust these values to control how currency appears in the cart:

Setting

Description

Options

useCurrencySymbol

Show or hide the currency symbol (example: $)

true / false

useCurrencyCode

Show or hide the currency code (example: USD)

true / false

currencySymbolPlacement

Where the symbol appears

'left' / 'right'

currencyCodePlacement

Where the code appears

'left' / 'right'

currencySymbolSpacing

Adds a space between symbol and amount (example: $ 10.00)

true / false

currencyCodeSpacing

Adds a space between code and amount (example: 10 USD)

true / false

currencyFormat

Controls number formatting

{{amount}}, {{amount_no_decimals}}, etc. (refer to Shopify’s currency options)


Final result

Once the script is added and saved:

  • Currency symbols and codes display exactly as configured

  • Works across all parts of the Upcart drawer, including rewards and upsells

  • Adapts to Shopify Markets automatically if they are enabled


Need help?

For advanced customization, we recommend working with a Shopify Expert. Upcart’s support team does not assist with writing or troubleshooting custom code.

Did this answer your question?