Shopify Theme Development - how to display product price with comma separation and currency

Question

I am attempting to pull through a collection 'featured', then for each product pulled through I would like to display the price of the product with the currency and comma separated if it runs into the thousands.

So here is my code, successfully pulling through the products from the collection however I don't know and can't find relevant documentation on displaying the currency when within the product loop.

{% if collections['featured-products'].products.size >= 1 %}
    
    {% for product in collections['featured-products'].products limit:3 %}

    <div class="featured-product">
        <div class="featured-product-image" style="background-image: url({{ product.featured_image | product_img_url: 'medium' }})"></div>

        <p class="featured-product-title">{{ product.title | escape }}</p>
        <p class="featured-product-price">{{ product.amount_with_comma_separator }}</p>

        <div class="product-buttons">

            {% include 'view-button' %}
            {% include 'add-to-cart-button' %}

        </div>
    </div>

    {% endfor %}

{% endif %}

I have also used {{product.price}} which works but doesn't use the relevant currency or show commas when into the thousands.

Answer 1

You are looking for money filters. Those filters allow you to format number with currency and decimals etc. You can set the currency formatting in Shopify admin and then use the filters accordingly.

Shopify Currency Formatting

You can use product price and then apply desired filters like

{{ product.price | money }}
{{ product.price | money_with_currency }}
{{ product.price | money_without_trailing_zeros }}

Shopify Money Filters