If you have products priced > $999, and dynamically update the displayed price on your product page when different options are selected, then you may have noticed that thousands separator don't appear.

The culprit is the floatToString method that Shopify.formatMoney is calling (part of option_selection.js). It doesn't account for the thousands separator.

For the site I was fixing I went with a straightforward old-school approach as described here: http://www.mredkj.com/javascript/nfbasic.html If you wanted something that takes into account the locale of the shop of the browser you may want to check out the StackOverflow suggestions in terms of how to fix it, or take a look at a jQuery friendly version.

My product.liquid code ended up looking like this:


...

function addCommas(nStr) {
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

var selectCallback = function(variant, selector) {
	if (variant && variant.available == true) {
		jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
		var price = addCommas(Shopify.formatMoney(variant.price, "{{shop.money_format}}"));
		var compare = variant.compare_at_price == null ? "" : " <del>" + Shopify.formatMoney(variant.compare_at_price, "{{  }}") + "</del>";
		var compare_comma = addCommas(compare);
		jQuery('#product-price').html(price + compare_comma);  // update price field
	} else {
		jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
		var message = variant ? "Sold Out" : "Unavailable";    
		jQuery('#product-price').text(message); // update price-field message
	}
};

...