Dawn theme - small numbers after price decimal

teeshop
Tourist
6 0 3

Hello all!
How can i make the numbers after decimal smaller on the product price?

Replies 4 (4)
ZestardTech
Shopify Expert
3333 550 761

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
teeshop
Tourist
6 0 3

Hi,
My store URL is www.teeshop.bg
No password. The store is live

Regards,
Simeon

diego_ezfy
Shopify Partner
2631 485 649

@teeshop,

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

 

teeshop
Tourist
6 0 3

Hi Diego,
The code works perfect. Only one thing i wish to change. The numbers after decimal appears in the bottom. I want them in the top. How to do that? Check the screenshot

screenbud-728d80b9-fcaf-4d3b-aa5e-8b2275f9879c.png