Change shape of sale badge and position

Solved

Change shape of sale badge and position

ads18922
Pathfinder
168 0 50

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:

Screenshot 2024-11-11 at 22.49.56.png

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

IMG_2221.jpg

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

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
11578 2268 2447

This is an 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;
}

Screenshot 2024-11-12 at 09.17.49.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 5 (5)

mrashid
Shopify Partner
300 26 32

@ads18922 paste this in base.css

.badge {
    top: 0px;
    position: absolute;
    right: 0;
    border-radius: 0;
}
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Kyle_liu
Shopify Partner
421 53 77

Hi @ads18922 

You can try the following steps to fix it

 

1. edit theme code

Kyle_liu_0-1731377580925.png

 

2. find base.css

Kyle_liu_3-1731377614784.png

 

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

 

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

 

 

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me Email Me Buy Me A Coffee

Dan-From-Ryviu
Shopify Partner
11578 2268 2447

This is an 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;
}

Screenshot 2024-11-12 at 09.17.49.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Rahul_dhiman
Shopify Partner
808 155 169

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
89.png

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

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

Amanda_Fordeer
Shopify Partner
176 10 33

@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 

Amanda_Fordeer_0-1731395249756.png

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)

Amanda_Fordeer_1-1731395343612.png

 

Hope it will help 💛

If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.