Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
@ads18922 paste this in base.css
.badge {
top: 0px;
position: absolute;
right: 0;
border-radius: 0;
}
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;
}
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;
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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
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 💛
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024