Help with newsletter positioning

  • 10 April 2021
  • 2 replies

Badge +2



Im trying to figure out how to place my newsletter to be in the right hand side (same as now) on the site as desktop version, but i want it to be first thing up when its on Mobile version (as in before the footer links start - i want it to be first thing that shows on the footer menu on Mobile version)


Another Question.. for some reason the Email field is extremely small .. even tho i made it quite long during the editing process, please any help would be lovely!


website is 



Best answer by julie.accardo 10 April 2021, 13:43

View original

2 replies

Userlevel 5
Badge +34

Hi @waleedvivo,


Klaviyo offers 3 different signup form styles:

  • Popup - Will always appear in the center of the screen
  • Flyout - You can adjust the form behavior so that it slides out from the bottom right corner of the screen
  • Embed - You can place this form anywhere on your website.

You have the ability to design device specific signup forms (one for desktop and one for mobile). Knowing the different form options, I would recommend switching the form you are designing for desktop to be a flyout or embed. If you’d prefer not to have the sliding behavior when the form first appears, then I’d recommend designing an embed form. Because an embed form can appear anywhere on your website, you will need to add a short code snippet unique to the embed signup form to your website based on where you want it to display.


If the email entry field looked fine in the form editor in Klaviyo but is now appearing really small when added to the website, this is likely due to CSS on your website overriding the forms styling. In order to resolve this, you’ll want to work with a front end web designer to locate the CSS that is causing the issue on your website and modify it. If you do not have a web designer resource, Klaviyo has an extensive database of agency partners that we could connect you with.


I hope this helps!


Badge +2

Thank you! 


I have successfully applied the mobile version to the spot i want it to be.


Now my issue is that my Web version doesn't work unless i enable newsletter (i think its because its in the same code line) 

Now i want it to be there but without me enabling the newsletter on my theme - meaning i dont know where to apply the embedded code to be in the same spot but without having the condition work “if” newsletter is enabled - the theme newsletter enabling is simply just making room for a new column on the footer, the problem is it shows empty when its on the mobile version, but works perfect on the desktop.