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

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

jenok
Excursionist
22 1 3

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?Klaviyo Popup Text Missing2.png

Replies 8 (8)

Liqiud_xPert_SJ
Shopify Partner
1031 125 155

@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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
jenok
Excursionist
22 1 3

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

www.yummaliciouschocolates.com

Liqiud_xPert_SJ
Shopify Partner
1031 125 155

@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:

2024-03-18 19_29_06-Window.png

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
jenok
Excursionist
22 1 3

Hi - Thanks. Just curious... What does "Xuajs1" mean in the code?

 

Liqiud_xPert_SJ
Shopify Partner
1031 125 155

well thats a default class generated by Klaviyo CRM

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
jenok
Excursionist
22 1 3

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?

Liqiud_xPert_SJ
Shopify Partner
1031 125 155

same code should be work

2024-03-20 18_08_52-Window.png

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
jenok
Excursionist
22 1 3

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.

IMG_7721.PNG