How to change sale price colour and add 'NOW:' on product page?

[ChrisW3]

We would like to change the sale price to a red colour and say "NOW: " before the price. In this case this is the £967.49.

It should only apply to products that have a sale price active.

https://www.physioworldshop.co.uk/products/collections-electric-couches-products-addax-practice-manager-electric-treatment-couch-2-sections-blue

[Moeed]

Hey @ChrisW3

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ChrisW3]

Hi, that worked, but is there any way to make the inc VAT text red if there’s a sale price too:

[Dan-From-Ryviu]

Hi @ChrisW3

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code under element

[ChrisW3]

Also this is appearing on products that haven’t got a sale price

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open product-template.liquid file, add this code below before

{{ product.title }}

code

{% if product.compare_at_price_max > product.price and section.settings.product_show_saved_amount %}

        {% endif %}

[ChrisW3]

Hi, this didn’t work, I can give you access if it is easier?

[Dan-From-Ryviu]

Please message me your Collaborator request code in store admin > Settings > Users and permission so I can send request access and help you

[mandasa]

Hello @ChrisW3

To change the sale price styling for products with an active sale, you’ll need to modify your theme’s code. Here’s a general guide on how you can achieve this in Shopify:

1. Access Theme Code:

   • Go to the Online Store

   • Edit Code

   • Find theme .liquid file

   • Add the following code at the bottom of the file above tag

2. Locate Product Template:

   • In the theme editor, find the template file responsible for displaying product prices. This is typically product.liquid or similar.

3. Identify Sale Price Section:

   • Look for the section of code that displays the product price.
   • There might be an if statement checking for a sale, and within that block, you’ll find the code for displaying the price.

4. Modify Code:

   • Edit the code to include the “NOW:” text and apply the red color.
   • Here’s an example modification:
     liquid

5. {% if product.compare_at_price > product.price %} NOW: {{ product.price | money }} {{ product.compare_at_price | money }} {% else %} {{ product.price | money }} {% endif %}

   • This assumes that your theme uses the compare_at_price to identify sale prices. Make sure to adjust this code based on how your theme handles sale prices.

6. Save Changes:

   • After making the changes, save the file.

7. Test:

   • Test the changes on your live store by going to a product with an active sale to ensure the styling is applied correctly.

Please note that modifying code can have unintended consequences, and it’s recommended to make a backup or work on a staging environment before making changes to the live theme. If you’re not comfortable with code modifications, please write us at info@mandasa.in

Many Thanks,

Mandasa Technologies
Top rated Shopify Experts
https://www.shopify.com/partners/directory/partner/mandasa-technologies
https://www.mandasa.in/
Email: [email removed]

[Jim3]

Hello,

Hope you are doing great! And thank you for your help in the shopify community!

Is it possible for some further guidance how I could change the price and the Sale mark in red?
I am attaching below a screenshot of what I mean. Thanks in advance!

Kind regards, Kaloyan

[Jim3]

I tried your instructions already by myself but I couldn’t manage

[Moeed]

Hey @Jim3

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Dan-From-Ryviu]

Could you share your store URL so I can check?

[Jim3]

Yes, thank you!

https://a68618-6a.myshopify.com/products/peripage-a6-mini-pocket-printer-paper-mobile-photo-label-printer?variant=48937764847944

[Jim3]

Hey, Dan

Is everything okay? Did you saw the URL you asked for?

[Dan-From-Ryviu]

HI @Jim3 , Your store has password protected

[Jim3]

Yes, excuse me about that. Here it is

pass: langau

[Dan-From-Ryviu]

From Online Store > Themes > Customize > Theme settings > Badges, you can change color of sale badge

[Jim3]

Unfortunately this is changing the colour of the announcement bar and the sale badge. I want only the Sale badge to be red and the announcement bar to stay black. Do you know how could we do this?