How can I make a sale badge a discount tag?

Solved

How can I make a sale badge a discount tag?

FelaC
Tourist
16 0 2

Ekran Resmi 2024-07-04 20.09.43.png

 

I changed the "Sale" label next to the price to "Limited Edition".

But what I really wanted was to show the discount amount of the product here.

I have several products with different discount percentages. How can I create a label that shows the correct discount for all of them?


Label Colour Hex Code: #1777f2
Font: Bold
Corner: Rounded, 6px

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8532 1681 1692

This is an accepted solution.

Update the code 

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
{{ percent }}% OFF

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
8532 1681 1692

Hi @FelaC 

What theme are you using? Could you share your store URL?

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

FelaC
Tourist
16 0 2
Dan-From-Ryviu
Shopify Partner
8532 1681 1692

Go to your Online Store > Themes > in Refresh theme, click "..." > Edit code > open price.liquid file, find this line of code 

{{ 'products.product.on_sale' | t }}

Replace it with this code and save the file.

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
{{ percent }}%

Relate to change color of this button, you can find it in Theme customize, theme settings Screenshot 2024-07-05 at 11.13.42.png

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

FelaC
Tourist
16 0 2

I want the label to say "X% OFF". How can I do that?

Dan-From-Ryviu
Shopify Partner
8532 1681 1692

This is an accepted solution.

Update the code 

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
{{ percent }}% OFF

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

FelaC
Tourist
16 0 2

Thank you. It worked!

Dan-From-Ryviu
Shopify Partner
8532 1681 1692

You are very welcome! 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
8532 1681 1692
You are very welcome

Regards,

Dan

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GTLOfficial
Shopify Partner
273 51 52

Hello @FelaC ,

2) For Label Colour Hex Code: #1777f2
Font: Bold
Corner: Rounded, 6px

Go to online store ---------> themes --------------> actions ------> edit code------->assets------>section-main-product.css
add this code at the bottom of the file.

.product .price .badge, .product .price__container {
background: #1777f2;
height: 28px;
font-weight: bold;
border-radius: 11px;
}

and the result will be
1.png


If this was helpful, hit the like button and mark the job as completed.
Thanks

 

 

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh