How can I make the Shopify price look like Amazon Price?

Solved
VuongTuanAnh
Explorer
46 0 6

Hi everyone, are there any apps to make the Shopify Price look like Amazon Price like this?

VuongTuanAnh_0-1634228680461.jpeg

Thank you;

Accepted Solution (1)

Accepted Solutions
Ninthony
Shopify Partner
2247 339 900

This is an accepted solution.

Ok I just looked at a fresh install of Dawn theme. Open price.liquid in your snippets folder. Ctrl + F for "{{ money_price }}" -- there should be a couple instances of it. Replace them both with this:

{{ money_price | split: '.' | first }}<sup>{{ money_price | split: '.' | last }}</sup>

 

You should be good to go.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D

View solution in original post

Replies 9 (9)
Ninthony
Shopify Partner
2247 339 900

You'll have to find your product price in your product-template code and in it's place put something like:

${{ product.price_min | money }} - ${{ product.price_max | money }}

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
VuongTuanAnh
Explorer
46 0 6

Thank you, @Ninthony, but I mean how to make the small number above the main price (not the ranging price). Do you have any ideas for this?

Ninthony
Shopify Partner
2247 339 900

Sure, in that case it's really going to depend how your price is being output. For the sake of argument, let's say that the variant price is being output with a money filter. Here's what it would look like before any editing:

 

 

 

{{ variant.price | money }}

//Output: $29.99

 

 

 

 

To get the price to appear the way you want it, you could split the price by the period and show the first part of that split, then do the same thing but show the last part of the split and surround it in <sup></sup> tags, which would give you the effect you're looking for:

 

 

 

{{ variant.price | money | split: '.' | first }}<sup>{{ variant.price | money | split: '.' | last }}</sup>

 

 

 

 

Which would give you $2999 --- but the ending 99 would be smaller and placed slightly above like the effect you're requesting. Unfortunately I can't show it due to Shopify's editor.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
VuongTuanAnh
Explorer
46 0 6

Thank you @Ninthony, I will give it a try now 

VuongTuanAnh
Explorer
46 0 6

Hi @Ninthony, I tried to replace the code "{{ variant.price | money | strip_html }}" in the main-product.liquid (I use dawn theme) and used the code you suggested but nothing changed. The price still stayed the same. My site is here, can you take a look at it, please?

Ninthony
Shopify Partner
2247 339 900

This is an accepted solution.

Ok I just looked at a fresh install of Dawn theme. Open price.liquid in your snippets folder. Ctrl + F for "{{ money_price }}" -- there should be a couple instances of it. Replace them both with this:

{{ money_price | split: '.' | first }}<sup>{{ money_price | split: '.' | last }}</sup>

 

You should be good to go.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D

View solution in original post

VuongTuanAnh
Explorer
46 0 6

Thanks, @Ninthony, it works perfectly. However how can I change the size of the 99 number above, I want it to be a little bit smaller (size as half of the main price)

VuongTuanAnh
Explorer
46 0 6

And how can I set the "Amazon Price" only to appear in Collection, Recommendation, and stay as usual on the product page? Thanks for your help