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

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

BoldAttire
Tourist
18 0 2

Screenshot 2024-09-08 012851.png

Replies 5 (5)

sahilsharma9515
Shopify Partner
1257 163 241

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


BoldAttire
Tourist
18 0 2

gencraze.com

BoldAttire
Tourist
18 0 2

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

sahilsharma9515
Shopify Partner
1257 163 241

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" Badge

  1. Go to the Code Editor:

    • From your Shopify Admin, navigate to Online Store > Themes.
    • Click on Actions > Edit Code next to your Dawn theme.
  2. 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.
  3. 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 %}
  <span class="badge sale-badge">Sale</span>
{% 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 %}
  <span class="badge sale-badge">
    {{ discount_percentage | round }}% Off
  </span>
{% 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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Discounty-Marry
Shopify Partner
8 0 0

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.

Marry
Customer Success Expert at Discounty App