How can I position a sale badge on top of an image?

Store Design
1

How can i add a sale badge on top of the image like this example:

Screenshot 2021-04-02 at 12.24.06.png
Screenshot 2021-04-02 at 12.24.06.png215×283 14.7 KB

On my side the badge currently displays underneath the product.

Www.vitament.co.uk

2

Hello there.

Here is code which you can use to display sale badge

{% 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 %}

Note: You have to add it in collection and product template a/to theme also have to adjust css accordingly.

3

I have the code already. I need to display it on top of the image like the example.

4

Please share your store URL and password.
So that I will check and let you know the exact solution here.

5

Www.Vitament.co.uk

I want the sake badge on the top right of the product image like the example shown

6

Hello there.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.price__badges.price__badges--listing {
position: absolute;
top: 0;
right: 0;
}