Shopify themes, liquid, logos, and UX
Hi everyone, are there any apps to make the Shopify Price look like Amazon Price like this?
Thank you;
Solved! Go to the solution
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.
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 }}
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?
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.
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.
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)
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024