Hi all!
Do you have any suggestions how to change badge color in mobile version only?
I tried this solution, but it worked only for desktop version:
https://community.shopify.com/post/1583804
Now I have different badge color in mobile and desktop, but want “sale” badge to be red and “out of stock” badge to be grey-green in both versions.
Thank you in advance!
Regards,
Olga
Hello @Olga_MLB
You can follow these steps:
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
By default, the Dawn’s theme sale badges will always show up with a blue background, while the sold out badges are shown up with a black background and white text.
@Olga_MLB
Hello,
@media screen and (max-width: 767px){
.card .badge[class*="accent"] {
background: #ED0000 !important;
color: #ffffff !important;
font-size: 12px !important;
}
.card .badge[class*="inverse"] {
background: #ACBFBA !important;
color: #f1f1f1 !important;
font-size: 12px !important;
border: #ACBFBA !important;
}
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
Hello @GemPages ,
Thank you for the solution! It worked at collection page, but not on the product page.
Is it possible to add code for the product page as well? And remove white/black frame around the badge?
Thank you for your help!
Regards,
Olga
Hello @oscprofessional ,
Thank you for the solution, but it seems I don’t have “theme.scss.liquid“ and at the bottom of “theme.liquid” it doesn’t work.
Regards,
Olga
@Olga_MLB
Hello,
@media screen and (max-width: 767px){
.card .badge[class*="accent"] {
background: #ED0000 !important;
color: #ffffff !important;
font-size: 12px !important;
}
.card .badge[class*="inverse"] {
background: #ACBFBA !important;
color: #f1f1f1 !important;
font-size: 12px !important;
border: #ACBFBA !important;
}
}
Add this CSS at the bottom of Online Store-> Theme->Edit code->Assets->base.scss.liquid
Like This
