Numbers & Money Filters

Nimbu provides comprehensive number and money formatting filters with automatic currency localization based on your site settings.

Money Formatting

money_with_currency

Format number as money with currency symbol:

{{ 99.99 | money_with_currency }}
<!-- Output: €99,99 (if EUR is site currency) -->

{{ product.price | money_with_currency }}
<!-- Output: $129.00 (if USD is site currency) -->

With Options:

{{ price | money_with_currency, unit: '$', separator: '.', delimiter: ',' }}
<!-- Output: $1,299.99 -->

{{ price | money_with_currency, precision: 0 }}
<!-- Output: €100 (no decimals) -->

money_without_currency

Format as money without currency symbol:

{{ 99.99 | money_without_currency }}
<!-- Output: 99,99 -->

<span class="price">€{{ product.price | money_without_currency }}</span>

money_with_currency (fancy decimals)

Wrap decimals in a span for styling:

{{ 99.99 | money_with_currency, fancy: true }}
<!-- Output: €99<span class="decimals">,99</span> -->

CSS Example:

.price .decimals {
  font-size: 0.7em;
  vertical-align: super;
}

Currency Formatting

number_to_currency

Convert number to currency with full control:

{{ 1234.56 | number_to_currency }}
<!-- Uses site default currency -->

{{ amount | number_to_currency, unit: '€', separator: ',', delimiter: '.' }}
<!-- Output: €1.234,56 -->

{{ price | number_to_currency, precision: 0 }}
<!-- Output: $1,235 (rounded) -->

Parameters:

unit: Currency symbol (default: site currency)
separator: Decimal separator (default: site setting)
delimiter: Thousands delimiter (default: site setting)
precision: Decimal places (default: 2)

Number Formatting

number_with_delimiter

Add thousands separators:

{{ 1234567 | number_with_delimiter }}
<!-- Output: 1,234,567 -->

{{ views_count | number_with_delimiter, delimiter: '.' }}
<!-- Output: 1.234.567 -->

number_with_precision

Format number with decimal precision:

{{ 123.456 | number_with_precision, precision: 2 }}
<!-- Output: 123.46 -->

{{ 100 | number_with_precision, precision: 3 }}
<!-- Output: 100.000 -->

{{ rating | number_with_precision, precision: 1 }}

number_to_percentage

Convert to percentage:

{{ 0.85 | number_to_percentage }}
<!-- Output: 85.000% -->

{{ 0.85 | number_to_percentage, precision: 0 }}
<!-- Output: 85% -->

{{ conversion_rate | number_to_percentage, precision: 2 }}
<!-- Output: 12.45% -->

Parameters:

precision: Decimal places (default: 3)
separator: Decimal separator
delimiter: Thousands delimiter

Human-Readable Numbers

number_to_human

Convert large numbers to readable format:

{{ 1234 | number_to_human }}
<!-- Output: 1.23 Thousand -->

{{ 1234567 | number_to_human }}
<!-- Output: 1.23 Million -->

{{ 1234567890 | number_to_human }}
<!-- Output: 1.23 Billion -->

{{ followers_count | number_to_human, precision: 2 }}

number_to_human_size

Format file sizes:

{{ 1024 | number_to_human_size }}
<!-- Output: 1 KB -->

{{ 1536 | number_to_human_size }}
<!-- Output: 1.5 KB -->

{{ 1234567 | number_to_human_size }}
<!-- Output: 1.18 MB -->

{{ file.size | number_to_human_size }}

Phone Number Formatting

number_to_phone

Format phone numbers:

{{ "1234567890" | number_to_phone }}
<!-- Output: 123-456-7890 -->

{{ phone | number_to_phone, area_code: true }}
<!-- Output: (123) 456-7890 -->

{{ phone | number_to_phone, delimiter: '.' }}
<!-- Output: 123.456.7890 -->

Parameters:

area_code: Wrap area code in parentheses
delimiter: Separator character (default: -)
extension: Add extension number
country_code: Prepend country code

Practical Examples

Product Pricing

<div class="product-price">
  {% if product.compare_at_price > product.price %}
    <span class="original-price">
      {{ product.compare_at_price | money_with_currency, fancy: true }}
    </span>
    <span class="sale-price">
      {{ product.price | money_with_currency, fancy: true }}
    </span>
    <span class="savings">
      {% assign savings = product.compare_at_price | minus: product.price %}
      Save {{ savings | money_without_currency }}
    </span>
  {% else %}
    <span class="price">
      {{ product.price | money_with_currency, fancy: true }}
    </span>
  {% endif %}
</div>

Cart Total

<div class="cart-summary">
  <div class="subtotal">
    <span>Subtotal:</span>
    <span>{{ cart.subtotal | money_with_currency }}</span>
  </div>

  {% if cart.total_discount > 0 %}
    <div class="discount">
      <span>Discount:</span>
      <span class="negative">
        -{{ cart.total_discount | money_with_currency }}
      </span>
    </div>
  {% endif %}

  <div class="shipping">
    <span>Shipping:</span>
    <span>
      {% if cart.shipping_cost > 0 %}
        {{ cart.shipping_cost | money_with_currency }}
      {% else %}
        FREE
      {% endif %}
    </span>
  </div>

  <div class="total">
    <span>Total:</span>
    <span>{{ cart.total | money_with_currency }}</span>
  </div>
</div>

Statistics Display

<div class="stats">
  <div class="stat">
    <span class="label">Downloads</span>
    <span class="value">{{ downloads | number_to_human, precision: 1 }}</span>
  </div>

  <div class="stat">
    <span class="label">File Size</span>
    <span class="value">{{ file_size | number_to_human_size }}</span>
  </div>

  <div class="stat">
    <span class="label">Success Rate</span>
    <span class="value">{{ success_rate | number_to_percentage, precision: 1 }}</span>
  </div>
</div>

Multi-Currency Display

{% if customer.currency != site.currency %}
  <div class="price-conversion">
    <div class="original">
      {{ product.price | money_with_currency }}
      <span class="currency-code">{{ site.currency }}</span>
    </div>

    <div class="converted">
      {% assign converted_price = product.price | times: customer.exchange_rate %}
      ≈ {{ converted_price | number_to_currency, unit: customer.currency_symbol }}
      <span class="currency-code">{{ customer.currency }}</span>
    </div>
  </div>
{% else %}
  {{ product.price | money_with_currency }}
{% endif %}

Pricing Table

<table class="pricing">
  {% for tier in pricing_tiers %}
    <tr>
      <td>{{ tier.name }}</td>
      <td>{{ tier.users | number_with_delimiter }} users</td>
      <td class="price">
        {{ tier.monthly_price | money_with_currency, precision: 0 }}/mo
      </td>
      <td class="annual">
        {% assign annual = tier.monthly_price | times: 12 | times: 0.9 %}
        {{ annual | money_with_currency, precision: 0 }}/year
        <span class="savings">(save 10%)</span>
      </td>
    </tr>
  {% endfor %}
</table>

Contact Information

<div class="contact-info">
  <p>
    <strong>Phone:</strong>
    {{ site.phone | number_to_phone, area_code: true }}
  </p>

  <p>
    <strong>International:</strong>
    +{{ site.country_code }} {{ site.phone | number_to_phone }}
  </p>
</div>

Best Practices

1. Respect Site Currency Settings

The money filters automatically use your site's configured currency:

<!-- ✅ Good: Uses site defaults -->
{{ product.price | money_with_currency }}

<!-- ⚠️ Only override when necessary -->
{{ product.price | money_with_currency, unit: '$' }}

2. Consistent Precision

Use consistent decimal places throughout your site:

<!-- ✅ Good: Consistent precision -->
{{ price | money_with_currency, precision: 2 }}
{{ total | money_with_currency, precision: 2 }}

<!-- ❌ Bad: Inconsistent -->
{{ price | money_with_currency, precision: 0 }}
{{ total | money_with_currency, precision: 2 }}

3. Handle Zero and Null Values

{% if product.price %}
  {{ product.price | money_with_currency }}
{% else %}
  <span class="price-na">Price not available</span>
{% endif %}

{% if shipping_cost == 0 %}
  <span class="free-shipping">FREE</span>
{% else %}
  {{ shipping_cost | money_with_currency }}
{% endif %}

4. Accessibility for Prices

<span class="price" aria-label="Price: {{ product.price | money_with_currency }}">
  {{ product.price | money_with_currency, fancy: true }}
</span>

Next Steps

Dates & Time - Format dates and timestamps
Commerce - Shopping cart and checkout helpers
Text Formatting - String manipulation
Global Variables - Available currency settings

Format numbers and money professionally with Nimbu's localized filters!

On this page