What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change sale badge colour on product card Dawn 15 V

Solved

Change sale badge colour on product card Dawn 15 V

ctal37
Trailblazer
159 1 37

hiiii

I would like to change the colour of sale badge that is on product card in homepage. please check screenshot

store url: https://5a3cf5-fc.myshopify.com/Screenshot 2024-09-10 at 3.08.23 PM.png

Accepted Solutions (2)
dws_pvt_ltd
Shopify Partner
339 65 84

This is an accepted solution.

See it perfectly works in the theme settings of the theme customisation,

Screenshot from 2024-09-10 17-48-32.pngScreenshot from 2024-09-10 17-48-27.pngScreenshot from 2024-09-10 17-47-24.pngScreenshot from 2024-09-10 17-47-06.png

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

View solution in original post

Rahul_dhiman
Shopify Partner
665 130 135

This is an accepted solution.

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

span#NoMediaStandardBadge-template--17181254746297__featured_collection_bYbp6n-7945386721465 {
background: red !important;
line-height: 0.5;
width: 80px !important;
}

result
4.png

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

Replies 11 (11)

dws_pvt_ltd
Shopify Partner
339 65 84

Hello @ctal37, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open base.css" OR "theme.css".
6. Add the following code at the end of the file.

 

.card__content .card__badge .badge {
    background: red;
}

 

dws_pvt_ltd_0-1725968589959.png

 

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
ctal37
Trailblazer
159 1 37

hey @dws_pvt_ltd  it is not working

dws_pvt_ltd
Shopify Partner
339 65 84

See its working,

dws_pvt_ltd_0-1725968982959.png

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
dws_pvt_ltd
Shopify Partner
339 65 84

Hello @ctal37, It can change with theme settings.

Go to Online store -> Open Theme Customisation -> Open theme settings in left side with settings logo.

add your color scheme of the badges that you want.

download (45).png

 

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
dws_pvt_ltd
Shopify Partner
339 65 84

Hello @ctal37, Remove all custom CSS which you added for this and Try in this way with theme settings. 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

Rahul_dhiman
Shopify Partner
665 130 135

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

.badge {
background-color: crimson !important;
color: white !important;
}

Result
3.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
ctal37
Trailblazer
159 1 37

@Rahul_dhiman this code is changing colour of both the badges and I just want to change the colour of ( sold out ) one also want to decrease the size of this badge. please help

dws_pvt_ltd
Shopify Partner
339 65 84

Check my last answer of theme settings, there you can customise different for both badges with different color.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
ctal37
Trailblazer
159 1 37

hey @dws_pvt_ltd idk but that is also not working please help

dws_pvt_ltd
Shopify Partner
339 65 84

This is an accepted solution.

See it perfectly works in the theme settings of the theme customisation,

Screenshot from 2024-09-10 17-48-32.pngScreenshot from 2024-09-10 17-48-27.pngScreenshot from 2024-09-10 17-47-24.pngScreenshot from 2024-09-10 17-47-06.png

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Rahul_dhiman
Shopify Partner
665 130 135

This is an accepted solution.

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

span#NoMediaStandardBadge-template--17181254746297__featured_collection_bYbp6n-7945386721465 {
background: red !important;
line-height: 0.5;
width: 80px !important;
}

result
4.png

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167