Change shape of sale badge and position

[ads18922]

I would like to change my sale badge so that it is a rectangle and is moved to the top right corner of the product image. Below is what my store looks like, as you can see the sale badge is curved and sits at the bottom left:

Now the below picture is what im after, any help will be great thanks:

I am using dawn theme and my website url is www.rosella-elegance.com

[mrashid]

@ads18922 paste this in base.css

.badge {
    top: 0px;
    position: absolute;
    right: 0;
    border-radius: 0;
}

[Kyle_liu]

Hi @ads18922 

You can try the following steps to fix it

1. edit theme code

2. find base.css

3. place the following code at the end of base.css

.badge {
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 0px;
}

[Dan-From-Ryviu · Accepted solution]

Hi @ads18922 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.card__inner .card__badge {
    grid-row-start: 1;
    position: absolute;
    top: -10px;
    right: 0;
}
.card__inner .card__badge .badge {
    border-radius: 0;
    padding: 1rem 1.5rem;
}

[Rahul_dhiman]

Hello @ads18922 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.badge {
border-radius: 0px !important;
}
.card__badge {
justify-self: flex-end;
margin-top: -12px !important;
margin-right: -9px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Amanda_Fordeer]

@ads18922,

I just checked your store and it seems like you haven't quite achieved what you wanted. Since many people can assist you with the code below, may I suggest an alternative solution (which could be easier and have long-term support)? It's using an app, Product Labels & Badges. This tool helps you customize the appearance and placement of labels to suit your store.

Kindly follow these steps:

1. Install app and enable app embed

2. Create your text label 

3. In the Product settings, type in your discount range to show the label automatically. (Optional - If you do not use this feature, the label will be shown on all or selected products)

Hope it will help 💛