Add Sales Badge Over Product Image

Solved
Highlighted
Tourist
9 0 2

Hello.

 

I'd like to add a badge on top of all my product images in both the collection list and product page similar to this page. 

 

https://arielblankets.com/

 

I would like my badge to automatically calculate savings percentage from the compare price & sale price. The badge would say something like "You Save 48%".

 

Can anyone help me with the code I need to add?

 

Thank you.

0 Likes
Highlighted

Success.

Shopify Partner
828 170 191

Hello 

{% if product.compare_at_price_max > product.price %}You Save {{ 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'}}% {% endif %}

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted

in product-template section .you will get regular price and comparison price .using these value find percentage than show it ,where you want it.

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Highlighted
Tourist
9 0 2

Thanks you so much. Where would I add the css? Using theme Debut.

0 Likes
Highlighted
Shopify Partner
828 170 191

theme.scss.liquid under Assets

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
9 0 2

Hey 

 

I'm no developer and much too busy to learn all this coding stuff. How much would you charge to provide me code and step-by-step instructions to replicate the badge on this site? I would need to add the custom badge everywhere that my product images appear.

 

https://arielblankets.com

 

Thank you

Paul

0 Likes
Highlighted
Shopify Partner
1237 162 362

I'll do it for you for free, you can send me a personal message on here with your store url and I can request access to your theme. I'll make a duplicate of your theme and only make changes on the duplicate then you can preview it before making it live.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
9 0 2

Thank you but I managed to solve the issue.

0 Likes
Shopify Partner
1237 162 362

No problem, glad you got it figured out. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
7 0 0

How ?

0 Likes