Solved

Button text is black when it should be white

Airri
Excursionist
23 0 4

I had an issue earlier with text on my site and had some rules added but now they're overriding other apps...

 

I have Klaviyo buttons that should have white text but it has black. Can someone help me fix this? Also, is there someway to stop this from happening in the future? I would like to add future buttons and artifacts without this issue present. 

 

One of the cases:

 

Screenshot 2024-05-23 010020.png

This is what it looks like in the editor: black button white text.

Screenshot 2024-05-23 010323.png

On my site: black button black text.

 

airrishop.myshopify.com

no pw

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1149 324 278

This is an accepted solution.

Hi @Airri 

This is Henry from PageFly - Landing Page Builder App

 

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 bottom of the file -> Save

 

.klaviyo-form [data-testid="form-component"] button {

    color: white !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | 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.

View solution in original post

Replies 3 (3)

PageFly-Henry
Shopify Partner
1149 324 278

This is an accepted solution.

Hi @Airri 

This is Henry from PageFly - Landing Page Builder App

 

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 bottom of the file -> Save

 

.klaviyo-form [data-testid="form-component"] button {

    color: white !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | 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.

Airri
Excursionist
23 0 4

Worked! Thanks!

Vinsinfo
Shopify Partner
302 112 107

@Airri Please follow below steps to change button text color from "Black" to "White". Let me know whether it is helpful for you.

 
1. From admin, go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "base.css" file and paste the below code at the bottom of the file and save changes.

 

.klaviyo-form button.needsclick{
  color: #FFFFFF !important;
}

 

 
Result will be like,
Vinsinfo_0-1716525927040.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support