Shopify themes, liquid, logos, and UX
Hi everyone,
I'm looking for a way to remove the decimal points next to the pricing sitewide in my Shopify store. I want the prices to be displayed as whole numbers, like $11 instead of $11.00. However, if the price is, for example, $11.40, it should still be displayed as $11.40.
I've been exploring the Liquid object in Shopify, but I'm not sure how to implement this change. Can someone please guide me on how to modify the Liquid code to achieve this?
Any help or suggestions would be greatly appreciated. Thank you!
Please note that I have already attempted to modify the Liquid code by using the money_without_currency
filter instead of money
, but it doesn't provide the desired outcome.
If you have any insights or code snippets that can help me achieve this, I would be grateful for your assistance.
Hello there,
Here's an example of how you can implement this change in your Liquid code:
{{ product.price | money_without_trailing_zeros }}
In the above example, product.price represents the variable that holds the price value for a particular product. By applying the money_without_trailing_zeros filter to the product.price variable, the price will be displayed as a whole number if it has no decimal or trailing zeros. If the price has a non-zero decimal value, it will be displayed as is.
You can apply this modification to various places in your Shopify store where prices are displayed, such as product listings, product pages, cart, checkout, etc.
Please note that the availability and usage of Liquid filters may vary depending on the theme you are using. If the money_without_trailing_zeros filter doesn't work for your specific theme, you may need to consult the theme documentation or contact Shopify support for further assistance.
Hey,
1. In your Shopify Admin go to online store > themes > actions > edit code and search theme.liquid file.
2. In your theme.liquid file, find the </body> (press CTRL + F on Windows or command + F on Mac)
3. paste this code right above the </body> tag:
<script>
function updatePrice(){
var prices = document.querySelectorAll(`.price-item`);
if (!prices)return;
for (var each of prices){
each.innerText = each.innerText.replace('.00', '');
}
}
window.onload = function() {
setTimeout(updatePrice, 50);
}
</script>
Hey,
1. In your Shopify Admin go to online store > themes > actions > edit code and search theme.liquid file.
2. In your theme.liquid file, find the </body> (press CTRL + F on Windows or command + F on Mac)
3. paste this code right above the </body> tag:
<script>
function updatePrice(){
var prices = document.querySelectorAll(`.price-item`);
if (!prices)return;
for (var each of prices){
each.innerText = each.innerText.replace('.00', '');
}
}
window.onload = function() {
setTimeout(updatePrice, 50);
}
</script>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025