Workaround for Desktop vs Mobile Home page

Attempting to follow the workaround given to create Desktop vs Mobile homepage via buttons on a Landing Page. There is an article and tutorial on this that I am trying to follow, but it is poorly written and I can’t understand where I went wrong.

  1. I created the Landing Page with 2 buttons: a) linked to desktop homepage, b) linked to mobile home page
  2. Following the tutorial edited Landing Page Code as

import wixWindow from ‘wix-window’;
$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
$w(“#button2”).show ();
button2 = link to mobile home page

  1. Solution works half way - the mobile only button is not displayed when accessing via desktop. This works good.
  2. However, when accessing via mobile, the landing page displays both desktop and mobile button
  3. What have I missed when trying to follow the workaround and tutorial?

@ mike kudo

try this:

import wixWindow from ‘wix-window’;

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
$w(" #button2 “).show ();
$w(” #button 1").hide ();
} else
$w(" #button 1").show ();
$w(" #button 2").hide ();

Sorry, forgot to mention that the tutorial says to click on Tools->Properties Panel, select button2 and mark “Hidden on Load”

I tried using your edited code, but still doesn’t work
The Desktop Landing Page shows the correct button, but when accessing via Mobile, the Landing Page still has both buttons

Don’t know if the Tools->Properties Panel setting is causing a conflict with the code. The tutorial does not suggest any setting for the Desktop Button

Hey Mike!

I don’t think you need two separate buttons, unless you want the user to be able to choose which version they want. If you want just one button, here is a useful snippet for you for the onClick function of a single button. Make sure it’s not connected to anything else.

 import wixWindow from 'wix-window';
 import wixLocation from 'wix-location';
$w("#introbutton").onClick(function () {
 if (wixWindow.formFactor === 'Desktop') { ('/desktophome');
 else if (wixWindow.formFactor === 'Mobile') { ('/mobilehome');

Good Luck!

Hi David - thanks for your posting. What value needs to be substituted for ‘/desktophome’ and ‘/mobilehome’
Is this the ID of each of the pages?
How do I get those IDs?

Thanks very much

It’s the link you’ve set for that particular page in it’s SEO&Social Settings in your Site Menu.

If you’ve enabled the mobile optimization option, you should also need to create a separate menu for it so that when you press the home button it takes you to your mobile home. Another option would be to set a code to reroute you when you attempt to reach the desktop home from a mobile platform, but this would mean that it would reroute you every single time, making load times longer on mobile.

Using collapsed elements that expand only in mobile can help you do this, and might also prevent you from needing a mobile home page as well.

Hope it helps.

Hi David - thank you very much for the code suggeston.
When I tried this - I get the following error message:

“There was an error in your script
The element selector function (usually $w) cannot be used before the page is ready”

I tried testing anyway from a Desktop - it works OK (but so did the other solution)
When I tried testing from my Mobile - after clicking on the Landing page button, it does not display the Mobile Home page. It displays pages which I hid from Mobile.


If that error code shows up the script won’t run, which is why it didn’t work for you.

You’ll have to add this string to the onReady snippet to your code so that it only runs when the page is loaded and not before. Try this:

import wixWindow from 'wix-window';
import wixLocation from 'wix-location':

$w.onReady(function() { 
  $w("#introbutton").onClick(function () {
 if (wixWindow.formFactor === 'Desktop') {
 else if (wixWindow.formFactor === 'Mobile') {
  } );
} );

That should solve the problem you’re having. If you’ve made multiple pages for mobile only, you’re going to have to either create more code snippets like this for each element that links to two different versions, or else take the easier route and create a mobile only element on every page that is hidden or collapsed in desktop mode.

Hi David - that did the trick! Thanks so much for sharing your expertise.
The Desktop vs Mobile home pages have other pages that are shown/hidden as appropriate.

@mkudo91361 Good to hear!

i have disabled my mobile view as i want to always display the desktop version, but it still runs the mobile site looks like crap. i want to force all devices to dektop…?