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.
Page 1 / 1
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
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
the desktop version is showing
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.
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
Thanks David for your help.
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.
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.
Did anyone figure this out. I’m having the same issue. Cloned mobile form is not showing on mobile.