Jump to content

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

Go to solution Solved by paul2009,

Recommended Posts

  • Solution

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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

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

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 5 months later...

You're welcome :-)

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 year later...
Guest riddellchris

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?

Link to comment
  • 1 month later...

Answer updated to cope with newer devices.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 5 months later...

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • Jo_SQSP unlocked this topic
  • 2 weeks later...
  • 4 weeks later...

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
  • 9 months later...
  • 3 months later...
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
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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 weeks later...

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.