How can I change the appearance of sale prices on my website (Dawn theme)?

Shopify Discussion
1

Screenshot 2024-09-08 012851.png
Screenshot 2024-09-08 012851.png783×439 47.5 KB

2

Hi @BoldAttire

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

3

gencraze.com

4

i want to show price first then compare at price then a bar ( | ) and then % off just like below image …i can do google meet or zoom meet as well

Screenshot 2024-09-08 012851.png
Screenshot 2024-09-08 012851.png783×439 47.5 KB

5

Hi @BoldAttire got the point, for changing the sale badge to percentage off page you need to edit the code in the theme files.

Steps to Display Percentage Off Instead of “Sale” Badge1. Go to the Code Editor:

  • From your Shopify Admin, navigate to Online Store > Themes.
  • Click on Actions > Edit Code next to your Dawn theme.

  1. Edit the main-product.liquid or price.liquid file:

    • Look for a file named main-product.liquid or price.liquid under the Sections or Snippets folder (depending on where the badge is defined).
    • This file usually contains the code for displaying the price and sale badge.

  2. Locate the Sale Badge Code:

    • Find the code that displays the “Sale” badge. It typically looks like this:
{% if product.compare_at_price > product.price %}
  Sale
{% endif %}

  • Replace “Sale” with Percentage Off Calculation:

    • Replace the “Sale” text with a dynamic percentage calculation. Use the following code to calculate the percentage discount:
{% if product.compare_at_price > product.price %}
  {% assign discount_percentage = 100 | minus: product.price | times: 100 | divided_by: product.compare_at_price %}
  
    {{ discount_percentage | round }}% Off
  
{% endif %}
  • This code calculates the percentage discount by subtracting the sale price from the original price, multiplying it by 100, and then dividing by the original price to get the percentage.

Note: This is the base code, you may need to edit the code according to your theme and code files.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

6

Hi @BoldAttire ,

I hope this message finds you well.

We’re excited to introduce a service from Discounty called “General Discount,” which makes managing store-wide discounts simpler than ever. With General Discount, you can apply custom discounts to a variety of products or collections, complete with “compare at” pricing to show prices before and after sales. Click here to install the app!

Should you have any questions or need assistance in configuring General Discount, our support team is here 24/7 to help you maximize the potential of this tool.

1 Like