⚠️ Important notice This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide. If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2. We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.

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

Go to Upcart > Cart Editor > Settings > Custom HTML
From the Select HTML Location dropdown, choose Scripts (Before load)
Paste the script below into the input field
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. See Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Customize currency formatting in Upcart

Overview

Where to add the script

Currency formatting script

Settings explained

Final result

Need help?

​Overview

​Where to add the script

​Currency formatting script

​Settings explained

​Final result

​Need help?

Overview

Where to add the script

Currency formatting script

Settings explained

Final result

Need help?