Solved

Mobile overlay not appearing

  • 12 March 2024
  • 2 replies
  • 30 views

Userlevel 1
Badge +2

Hello,

I created a flyout form and activated the Mobile overlay with the default settings, like these:

In the preview looks great:

But when in production (live Shopify store), it doesn’t show any darker overlay:

Any idea why isn’t showing as it should? Someone experiencing the same issue?

Thanks in advance!

Platanomelón

icon

Best answer by Taylor Tarpley 13 March 2024, 15:09

View original

2 replies

Userlevel 7
Badge +60

Hi there! 

 

Thanks for sharing your question with us! Happy to help! 

 

Whenever a form isn’t displaying how it’s designed in our form builder, it’s possible that something present on your website is interfering with the display. I’d have your developer or Klaviyo partner investigate if there is any conflicting CSS in your website’s code that could be causing this issue, like important tags, and delete them! Here’s a similar thread regarding a form display issue that could help gain more insight into this. 

 

This could be a job for your developer or a Klaviyo partner if you’re not a coder yourself.

 

Hope this helps!

-Taylor 

Userlevel 1
Badge +2

For anyone having the same issue with the Dawn Shopify Theme (the default one), it’s because inside base.css they place this rule by default:

 

 

The Klaviyo overlay works with an empty div (maybe this could be improved somehow @Klaviyo) so by removing this CSS line the overlay comes back to life 😁

Thanks for the support @Taylor Tarpley !

Reply