@Mexess,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.custom-decimal{
font-size: 8px;
margin-right: 2px
}
</style>
<script>
function smallDecimalPrice(){
var $prices = document.querySelectorAll(`.price-item > *`);
if (!$prices){
return;
}
for (var each of $prices){
var _price = each.textContent.trim();
var split = _price.split('.');
if (split.length >= 2){
var half = split[1].replace(/(\d\d)/, `<span class="custom-decimal">$1</span>`);
var price = `${split[0]}.${half}`;
each.innerHTML = price.trim();
}
}
}
smallDecimalPrice();
</script>
You can change the values as per your wish:
8px = decimal font size
2px = right spacing
This is not a particularly simple task, it may not work in some cases, especially if you're gonna work with multiple currencies. If that is the case, it's crucial getting in touch with a developer to develop a more thorough solution. With that said, this is a starting point.
Kind regards,
Diego
