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

Re: Dawn - Change variant background color

Solved

How can I alter the background color of variant badges in Dawn?

Alex087
Trailblazer
229 3 36

Hi,

 

I want to edit the background color of the 2 variant badges on my product page. if possible i would like a gradient color for the first badge.

 

Thanx for your help

Alex

Accepted Solution (1)
INA_MSWEB
Shopify Partner
1281 144 167

This is an accepted solution.

Not possible.

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

View solution in original post

Replies 4 (4)

INA_MSWEB
Shopify Partner
1281 144 167

Hi @Alex087 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.product-form__input input[type=radio]:checked+label {background: #7069bc54!important; color: #000 !important;}

 

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Alex087
Trailblazer
229 3 36

hi San,

Thanx for your help,

Is it possible to have a different color for each variant?

INA_MSWEB
Shopify Partner
1281 144 167

This is an accepted solution.

Not possible.

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

PageFly-Oliver
Shopify Partner
878 190 184

Hi @,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

.card__badge .badge{
background:black
}

PageFlyOliver_0-1694687657699.png

 



Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.