Customize Currency Formatting in Upcart

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

⚠️ 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

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.

See Shopify Experts