Cents and Currency symbol in superscript

Tourist
6 0 1

Hi everyone,

I am looking to change fonts for product price on the collection page and product page. More specifically, I would like the Currency symbol to be superscript, the decimal to be removed, and the cents symbol to be superscript. If you look at the image I attached, I am trying to go from OLD to NEW.  I believe this can be done through some liquid and CSS changes but I need some assistance.  I'm using Timber theme framework on our site www.motionrc.com .  Any help or ideas would be sincerely appreciated. 

Mark

 

0 Likes

The code you are looking for is in Supply theme, snippets/price.liquid.

Its a free theme and you can install it form the theme store. http://take.ms/uX54n

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
Tourist
6 0 1

So I create a file called price.liquid (with the code from the Supply theme) and put it in the snippets folder.  Then what do I do?  Do I need to add code to theme.liquid, product.liquid or collections.liquid to call that specific price.liquid code?  If so, can you please tell me how I do that.  

0 Likes
Highlighted
Shopify Expert
3 0 0

Look for your price tag, it can be something like:

 

{{ money_price }} or {{ price | money }} or something similar and add this at the end of it: 

| replace: '.','<sup>' }}</sup>

The result being: 

{{ money_price | replace: '.','<sup>' }}</sup>

Basically we use the "replace" function to look for the decimal, delete it and add a <sup> div. And we close the div after the price. 
You can then format the <sup> even more in css if needed.

 

0 Likes