🛍️ Shopify Money Format Utils

Shopify Money Format Utils is a lightweight JavaScript library for Shopify theme developers to format and parse money values exactly like Shopify Liquid’s money filters`.

Supports multi-currency, locale-aware separators, and custom currency symbols — perfect for global Shopify themes.

🚀 Features

• 🧮 Shopify-style money formatting (amount, amount_no_decimals, etc.)
• 💱 Multi-currency ready with symbol + position control
• 🌍 Locale-aware separators for EN / DE / FR / CH
• 🔄 Parses formatted strings back into numeric values
• 🪶 Zero dependencies — works in browser or Node

📦 Installation

npm install shopify-money-format-utils
# or
pnpm add shopify-money-format-utils

🧰 Usage

import { formatMoney, parseMoney } from 'shopify-money-format-utils';

// Format
formatMoney(1134.65, 'amount'); 
// → "1,134.65"

// Format with symbol and position
formatMoney(1134.65, 'amount', { symbol: '$', position: 'start' }); 
// → "$1,134.65"

formatMoney(1134.65, 'amount_with_space_separator', { symbol: '€', position: 'end' }); 
// → "1 134,65€"

// Parse formatted string back to number
parseMoney('1.134,65', 'amount_with_comma_separator'); 
// → 1134.65

// Remove currency symbol
parseMoney('€1.134,65', 'amount_with_comma_separator'); 
// → 1134.65

📊 Format Reference (Examples)

| Format Parameter | Example Formatted Output | Parsed Output (number) | Locale / Style | |----------------------|------------------------------|-----------------------------|--------------------| | amount | 1,134.65 | 1134.65 | en-US (default, 2 decimals) | | amount_no_decimals | 1,135 | 1135 | en-US (rounded, no decimals) | | amount_with_comma_separator | 1.134,65 | 1134.65 | de-DE (comma as decimal) | | amount_no_decimals_with_comma_separator | 1.135 | 1135 | de-DE (no decimals) | | amount_with_apostrophe_separator | 1'134.65 | 1134.65 | de-CH (Switzerland) | | amount_no_decimals_with_space_separator | 1 135 | 1135 | fr-FR (space separator) | | amount_with_space_separator | 1 134,65 | 1134.65 | fr-FR (space + comma decimal) | | amount_with_period_and_space_separator | 1 134.65 | 1134.65 | Custom (period decimal, space thousand) |

Note: Output is normalized to avoid non‑breaking/narrow spaces and smart apostrophes across environments.

💡 Shopify Theme Integration

To make JavaScript aware of your Shopify store’s money format and currency, copy this script in your theme.liquid file:

<script>
  if (!window.$shopify) { 
    window.$shopify = {};
  }
  window.$shopify.moneyFormat = String({{ shop.money_format | json }}).match(/\{\{\s*([^}]+?)\s*\}\}/)[1];
  window.$shopify.currencySymbol = `{{ cart.currency.symbol }}`;
</script>

Then use in JS:

const format = window.$shopify.moneyFormat;
const symbol = window.$shopify.currencySymbol;

formatMoney(1134.65, format, { symbol, position: 'start' });

🧩 Options

| Option | Type | Default | Description | |--------|------|----------|-------------| | format | string | "amount" | Shopify-like money format (case-insensitive) | | symbol | string | "" | Currency symbol (e.g. $, €, ¥) | | position | "start" or "end" | "start" | Symbol placement; trimmed & lowercased automatically |

🔧 Development

pnpm i
pnpm run build      # builds ESM + CJS + types to dist/
pnpm run typecheck  # TypeScript type checking (no emit)

🧪 Testing

• Unit tests live in src/**/*.test.ts (and/or tests/**/*.test.ts).
• We also ship a dist-entry test that imports the package by name to verify the exports map.

Run all tests:

pnpm run test

Watch mode:

pnpm run test:watch

Coverage:

pnpm run test:cov

Dist-entry test (builds first, then runs only that test):

pnpm run test:dist

🔍 Keywords (SEO)

Shopify money format, Shopify currency parser, multi-currency theme utils,
Shopify money JavaScript, Shopify Liquid JS equivalent, Shopify multi-currency formatting,
Shopify frontend utilities, Shopify theme development helper

📄 License

MIT © 2025 Reima