Can I set my homepage to a different page for mobile only

Is it possible to set the homepage on mobile device as a different page in your site rather then the page that opens for desktop. I would like my mobile site to open directly to a project/section rather then opening to a cover page.

Hi @Paul2009

That didn't work unfortunately, all I got was a warning message on mobile saying 'we couldn't find the page you were looking for...' can you advice further please.

To clarify again I have a homepage that is just an image which is fine for desktop but on mobile I would like the site to open directly to one of the project pages and ignore this full image page which is fine for desktop.

Thanks

Hi @Paul2009

That didn't work unfortunately, all I got was a warning message on mobile saying 'we couldn't find the page you were looking for...' can you advice further please.

To clarify again I have a homepage that is just an image which is fine for desktop but on mobile I would like the site to open directly to one of the project pages and ignore this full image page which is fine for desktop.

Thanks

As I mentioned in the answer, the page you are sending the mobile users to must have the URL of '/mobile'. If not, you will need to change the answer to match the URL of the mobile home page. Try that.

You haven't provided a link to your site and I'm unable to troubleshoot further without one.

this is exactly what i was looking for! thank you for the elegantly simple answer ^_^

You're welcome :-)

I've tried to do this but the page won't load for some reason when I go to test it on mobile.

I've kept it super simple even with a URL of mobile - any ideas?

Answer updated to cope with newer devices.

Thanks very much Paul, massive kudos to you. This was perfect, particularly with your added explanation.

Hi, it looks like this solution works for everyone but I am getting a "Syntax Error" message on the first line of the code. Is there a way to fix this? Thanks a lot in advance.

I'd need more information. For example, a screenshot of where you added the code and the website URL.

Thanks a lot Paul. I'm trying to direct mobile visitors to "http://www.guneysoykan.com/overview/". And the screenshot of my custom CSS page with the code is here: https://ibb.co/ZX6kgv9

Thanks for the screenshot. I can see that you've inserted the code into Custom CSS but this isn't the correct location for the code. See the answer above. It should be inserted into the Code Injection area. You'll find this in the home page's settings. Whilst viewing the home page, click the black Settings label.

Works perfectly! Thanks a lot!

Beware of "noindex"/hide from search engines option on any of your pages that you redirect to (like your mobile friendly page), as per this thread:
 

Hi Paul, just wanted to say thank you for that, and one small comment for anyone who's new to making these kinds of changes to Squarespace:

I'm guessing the best place to put this code is in the Page Header Code Injection (in the Advanced portion of the page settings)?

Hi Paul,

Thanks for this code. Seems to work for me, but for some reason it keeps refreshing when it lands on /mobile. 

Any help would be greatly appreciated. 

Thanks

Does this capability only work for Homepages or is there a way to make it work for other pages as well?

15 hours ago, Close_Notes said:

Does this capability only work for Homepages or is there a way to make it work for other pages as well?

The code should work on any pages which you insert the code.

On 6/18/2018 at 12:11 PM, riddellchris said:

I've tried to do this but the page won't load for some reason when I go to test it on mobile.

I've kept it super simple even with a URL of mobile - any ideas?

@paul2009 I've got this exact problem. I've kept it simple but i'm just getting a white screen and it doesn't load.

38 minutes ago, Tomz said:

I've got this exact problem.

To help you with a coding question, we need to be able to view the website. To allow us to do this, please post a working link to the page on your site. The url will end with .squarespace.com. Do not include the /config/ element. 

If your site isn't live yet, we will only be able to use the link if you set a view-only password and tell us what it is. Adding a password won't affect the security of the site, but will enable the community to view the site.

29 minutes ago, paul2009 said:

To help you with a coding question, we need to be able to view the website. To allow us to do this, please post a working link to the page on your site. The url will end with .squarespace.com. Do not include the /config/ element. 

If your site isn't live yet, we will only be able to use the link if you set a view-only password and tell us what it is. Adding a password won't affect the security of the site, but will enable the community to view the site.

Thanks for your quick response Paul.

Please see the website below;

https://frederic-aranda.squarespace.com/

On 8/31/2020 at 2:23 AM, Popsicledesigns said:

For some reason it keeps refreshing when it lands on /mobile. 

@Tomz it appears that you have added the code to the site's Header Injection instead of the homepage's Header Injection area.

To clarify, the code should not be added to Settings > Advanced > Code Injection > Header.

Instead, go to the Pages panel, and then find the site's homepage (not homepagem). Click the Settings [gear] icon beside the homepage name. When the Page Settings panel loads, click Advanced and you'll see a code injection area specific to this page.

   If a post helps you, please click a "Like" option below  ↘️

Hello, I am trying to use the above code to use two different pages, one for desktop and the other for mobile. On mobile, there will be some different promotional content for my customers.

here is my current desktop page (WIP) - https://bluebird-porcupine-yzdg.squarespace.com/collection_final

here is the mobile version (WIP) - https://bluebird-porcupine-yzdg.squarespace.com/mobile

Pword = bluebird

I have added the above code to my Desktop page via 'COLLECTION_FINAL (Copy)' / gear icon / Advanced:

<script>
if (document.documentElement.clientWidth <760) {
 window.location = "/https://www.scholarsayze.com/mobile";
}
</script>

But when I resize my browser, nothing happens?

Please can you double check I have implemented the code correctly?

Many thanks,

Best,

Faiz