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 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.
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.
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!
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.
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.
By clicking “Accept All Cookies,” you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Privacy Preference Center
Your Privacy
Strictly Necessary Cookies
Performance Cookies
Functional Cookies
Targeting Cookies
Site Analytics
Your Privacy
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
Privacy Notice
Strictly Necessary Cookies
Always Active
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Functional Cookies
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
Site Analytics
These cookies record your visit to our website, and are used to track your visit including information such as: web page interactions (clicks, hovers, focus, mouse movements, browsing, zooms and other interactions), referring web page/source through which you accessed the Sites, heatmaps and scrolls, screen resolution, ISP, and statistics associated with the interaction between device or browser and the Sites. If you are accessing our Services with a European IP address, you have been asked to consent to the use of these cookies (you are free to deny your consent).