How can I change the appearance of sale prices on my website?
i have exactly same issue
Hey @BoldAttire
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
i want to show price first then compare at price then a bar ( | ) and then % off …i can do google meet or zoom meet as well
Hi @BoldAttire ! Here is what you’ll need to do.
Online Stores > themes
Find the theme you want to update and click the “…” then select edit theme files
Locate the snippets/price.liquid file
Around line 86 look for
​Locate the closing div tag around line 103 (if you click the opening div tag listed above it will highlight the closing tag
Delete everything between the opening and closing div tags. Then replace with the following:
{{ 'products.product.price.sale_price' | t }}
{{ money_price }}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
{{ 'products.product.price.regular_price' | t }}
<s>
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
{% if product.compare_at_price_max > product.price %}
|
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF
{% endif %}
{%- endunless -%}
You can then add the following css at the bottom of the same file
Click save and then preview.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Cheers!
Mark
css is not applying…plz check again…rest are working
Hi @BoldAttire , please check the updated CSS in my original post. Let me know if this works and if not I will fix again! If the updated CSS works, please don’t forget to Like it and Mark it as Solution!
Kind regards,
Mark
Mark you are the best…Thank you so so so so much!!!
glad that i got an answer from you
Hey, I tried this and it worked but it actually changed ALL prices on my website to be like this, is there a way to have this work only on sale items and not everything on the website?
I’ve searched through and tried quite a few different codes and yours is the only one thats changed anything, but it just changed too much hahaha. thank you.
Hi @harpernz ! Could you please provide a link to your Shopify store so I can take a peek? The solution might vary based on the theme you are using.