Hi! I need that this badge that was customly created
to be a little bit smaller than the other one ( the right one) , because it takes too much space from our product card. Please, help me!
https://bymo.ro/collections/bustiere?page=2 - for example, the alabama bra has 2 badges , and it looks not so great
Hello @robertsolcan
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.
.badge {
font-size: 9px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
I only need the margins of the badge to be smaller, not the text!
Hi @robertsolcan ,
After reviewing the product display layout and have a suggestion to enhance the user experience. Considering the current 4-column layout and the importance of product focusability (in the case of dual badges), I propose moving the badges to the bottom of the product image. To provide a visual representation of this change, please refer to the attached result screenshot.
You can try both options below and if you still prefer to keep the badges on top, use the following code:
Go to Online Store >> Themes >> Actions >> Edit code >> base.css >> Open it and paste the code at the end of the file.
.badge {
border: 0;
padding: .5rem 1.1rem .6rem; //adjust values to reduce unnecessary white spaces around the text
}
If you want to move the badges to the bottom part of the image, add the following code along with the above styles:
card__inner .card__content {
grid-template-rows: none;
height: 100%;
grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
}
Result:
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
Regards,
Sweans
AWESOME! BTW, do you know how I can keep my custom badge ( not the sale one) also on the product page?
Dear @robertsolcan ,
Yes, it is certainly possible to achieve this. I look forward to assisting you further so, please feel free to DM me to talk about your specific requirements and figure out the best way to implement this feature.
Regards,
Sweans
Hi @robertsolcan ,
For adding multiple badges on product card and pages, please refer to the below video.
hope this will help others