Solved

Klaviyo sign up page for mobile

  • 16 June 2021
  • 7 replies
  • 498 views

Badge +1

Hi All, 

 

I’ve created a sign up form and have embedded the code onto my shopify website. The desktop version of the form appears fine however the mobile version needs to be reformatted. I suspect that I will need 2 version of the sign up form (1) for desktop (2) for mobile. How do you add the code to your shopify password liquid content so the right version will show for desktop and mobile? 

 

Thanks. 

icon

Best answer by David To 16 June 2021, 18:06

View original

7 replies

Did anyone figure this out. I’m having the same issue. Cloned mobile form is not showing on mobile.

Userlevel 6
Badge +50

Hi Klaviyo masters,

Same issue here. I created a sign up form (embedded) and set it up on desktop only. Cloned it and set up the other one on mobile only. Pasted both codes on the HTML editor on a Shopify page and unfortunately, only the desktop shows up. The mobile version doesnt. Not sure what I am doing wrong. Please help.Thanks. 

Hey @biannebaguio 

Can you share a screenshot of your mobile only versions behavior tab? There are a few different items there that could be impacting its display.

Hi Klaviyo masters,

Same issue here. I created a sign up form (embedded) and set it up on desktop only. Cloned it and set up the other one on mobile only. Pasted both codes on the HTML editor on a Shopify page and unfortunately, only the desktop shows up. The mobile version doesnt. Not sure what I am doing wrong. Please help.Thanks. 

Badge +1

Thanks David for your help.

Userlevel 7
Badge +53

Hey @LR21,

Some areas you may want to double check as to why the Mobile targeted form is not displaying are:

  • Ensuring that the form is Live and Published
  • Testing through an incognito or private browser in case the Don’t show to existing Klaviyo profiles setting is enabled
  • Making sure that your Device targeting is set accordingly; Desktop Only for the Desktop targeted form, Mobile Only for Mobile targeted form

In small occurrences, you may have some other onsite codes that may be interfering with the Klaviyo signup form code preventing the form from rendering. If this was the case, I would recommend reaching out and working with a developer to review your onsite codes and alleviating the issue. You can also feel free to checkout out our extensive network of agency partners who can also assist in this as well!

Have a great day!

David

Badge +1

Hi David, 

 

Thanks for your detailed reply. 

I have tried pasting the div code for mobile straight under the div code for desktop (just before the %comment%) and 

  1. the desktop version is showing 
  2. mobile version doesnt work (blue arrow is where I inserted the mobile div code)

I’ve reverted back to the single version for desktop and mobile for now.  

Can you please advise next steps. 

 

Attached fore reference. 

 

Thanks. 

 

Userlevel 7
Badge +53

Hello @LR21,

Thanks for sharing your question with the Klaviyo Community!

For a case like this I would recommend creating two forms, one targeted to only display on Desktop and one to only display on Mobile devices. You can change your form’s targeting settings within the form’s Behavior settings under Devices. You can learn more about these signup form settings from the Overview of the Signup Form Builder article

After creating these two forms, you’ll want to install both of the embedded form’s <div> code on the page and section you want the form to appear. You can find instructions on how to paste an install this code from the Where to Paste a Form's Embed Code article. With the forms installed and the targeting set, when viewing the page on a Desktop device, the only the form set with the Desktop Only setting will appear with the Mobile Only one hidden. The reverse would be true when viewing the page with a Mobile device where the form with the Desktop Only setting would be hidden and the one with the Mobile Only setting be visible. 

Hope this helps! 

David

Reply