2.0 Dawn Conflict w/ Klaviyo Homepage Popup Form b/c of CSS

[jenok]

Last October I upgraded from a Shopify 1.0 theme to the 2.0 Dawn theme. I use Klaviyo for my emails and popup forms. I recently attempted to update my homepage popup for the first time since upgrading to the 2.0 Dawn theme. What happens is that the placeholder text does not appear. This is the wording that sits in the field to tell the customer what info to enter… “Enter email address”… The field is blank. (See picture/green arrow). This also happens in the 2nd step of my popup form for SMS texting.

I have spoken with Klaviyo and they told me that it is probably a conflict between Klaviyo and Shopify CSS style sheets. Shopify Tech support could not help. I am not technical and I don’t understand what this means. Can someone please help me to fix this?

[Liquid_xPert_SJ]

@jenok welcome to the Shopify Community,

Can you please share the store URL so that i can look into it and give you the best solution.

thanks

[jenok]

Sure… Just know that if you click off on the popup form, it goes away for a few days.

www.yummaliciouschocolates.com

[Liquid_xPert_SJ]

@jenok

please place the below code into your theme files

Online Store > theme Files > Edit theme > base.css file

.needsclick.kl-private-reset-css-Xuajs1 input[type="email"]::placeholder {
	color: red !important;
	font-weight: bold !important;
}

Result:

[jenok]

Hi - Thanks. Just curious… What does “Xuajs1” mean in the code?

[Liquid_xPert_SJ]

well thats a default class generated by Klaviyo CRM

[jenok]

OK thanks. This worked!!! THANK YOU!!! I then reached out to Klaviyo again bc it did not work on step #2 of the popup form, which is for the customer to enter their SMS info (cell phone #). But we got that fixed.

My next issue with this is that the coding you gave me worked only on desktops. I went to my cell phone and the popup placeholder text still does not show. How can I fix this for mobile devices?

Is there something else I need to do for mobile devices?

[Liquid_xPert_SJ]

same code should be work

[jenok]

Hi- That’s great that it is working on your mobile device. But it is not working on mine, or several friends and families’ mobile devices (see attached pic). Please help me to figure out what else I can do to fix this because more people look at websites on their mobile devices rather than on their computers. Thank you.