Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


alistudio60

Question

Recommended Posts

  • 6

Hi

Yes, there's a workaround you can add for this. The code below assumes that the mobile version of your home page has the URL 'mobile'. Add the following code to the Code Injection area of the desktop Home page (you'll find this on the page settings on the Advanced tab):


<script>
if (screen.width<760) {window.location="/mobile";}
</script>


Paul


UPDATEI've updated this answer to allow for devices with higher resolutions and to allow testing on browsers when the width has been reduced.

Use the code below instead, adjusting the URL and the width (in pixels) to match your needs:


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


Edited by Paul2009
Initial Revision

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 1

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 1

Answer updated to cope with newer devices.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 1
On 1/19/2021 at 5:07 PM, scholarsayze said:

Thanks very much Paul, apologies for the misunderstanding I'm new to this.

Is there anyway to physically see this switch on my desktop screen? I can see this works now on my mobile but if I resize my desktop browser say to 640px, why can't I see the change in my browser (see attached images)?

Many thanks,

Best,

Faiz

640px.jpg

640px-screen.jpg

After resized to 640px you need to reload your site to code load again.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0

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

Link to comment
  • 0

You're welcome :-)

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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)?

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Link to comment
  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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/

Link to comment
  • 0
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  ↘️

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...