Jump to content

Language selector switch

Go to solution Solved by paul2009,

Recommended Posts

Hello everyone

My site is available in English and Lithuanian langauges, but switching between the two languages on the mobile screen is inconvenient because it requires a three-step action.

I would like language switch to be displayed on top of the screen without having to go few times through a header. 

That would be very much appreciated, thank you!

IMG_3637.thumb.jpeg.4e414b4b8958453cc92837d1e90a278f.jpeg

 

 

IMG_3638.thumb.jpeg.ac85ddf5412e34940a29fbee93ff76d1.jpeg

 

 

IMG_3639.thumb.jpeg.cef2ba29e5ebebfd65dd25be93c023fa.jpeg

 

I tried the code below but it doesn't work: 

@media screen and (max-width:991px) {
.header-actions.header-actions--right, .header .language-picker-desktop {
    display: flex !important;
    order: 3;
}
.header-title-nav-wrapper {
    flex: 1 0 30% !important;
}
}

 

Link to comment
1 hour ago, Jeremy2338 said:

switching between...languages on the mobile screen is inconvenient because it requires a three-step action. I would like language switch to be displayed on top of the screen

Do you have a mockup of how you would like the top of the screen to look?

I agree that the top of the page is the ideal location for a language switcher, but whilst this is easy to achieve on desktop layouts, it is not so easy on mobile because this space is already taken by other important elements like the navigation icon, the cart icon and the brand/site name:

image.jpeg.bd4eca10971e0184bc300674f6b4f4b0.jpeg

It's also important to bear in mind that mobile elements need to be touched, so these touch targets must have a minimum size and be sufficiently spaced. Crowding can cause errors, and these are likely to frustrate users, who then leave.

If it helps, user trials showed that putting the language switcher within the menu is a good alternative to having it in the top right or left corner. It is significantly better than the footer as pages tend to be longer when viewed on mobile, and users may never reach the footer.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

@paul2009 I appreciate your thorough reply.

I have couple ideas on how to place the selector without displaying the language word next to the flag so it occupies minimal space. In addition to minimizing space, logo could be made smaller.

 

image.jpeg.815b8663ced8b737ffda985ded08fa95.jpeg

 

3 hours ago, paul2009 said:

If it helps, user trials showed that putting the language switcher within the menu is a good alternative to having it in the top right or left corner. It is significantly better than the footer as pages tend to be longer when viewed on mobile, and users may never reach the footer.

I am not sure I understand this part. English isn't my first language. . Can you please elaborate?

Edited by Jeremy2338
Link to comment
  • Solution
On 10/6/2023 at 2:21 PM, Jeremy2338 said:

I am not sure I understand this part.

Sorry if my comments weren't clear. The default location for the Language Selector is within the mobile navigation. User testing has shown this to be a good location because users often click the burger menu (top right) to find options that match their language.

I don't recommend trying to add it to the mobile header because, to make space, the branding will need to be much smaller:

image.png.fe0fc7860b72b459f11efdf972dee02e.png

Also, using a flag (only) to represent language can be confusing as it isn't clear what the setting is for. Does it change the language, the currency or the country for shipping? 🙂

 

Edited by paul2009
edited for clarity

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

@paul2009 you are absolutely right! The branding would be much smaller, lets leave it in the burger menu 🙂

Also, do you happen to known how to redirect the customer to the page after switch the language? Lets say the user decides to switch the language from tge homepage, store, contacts etc., -> burger menu -> language selector -> ENGLISH -> and gets redirected straight to the page he switched the language from.

Link to comment
5 minutes ago, Jeremy2338 said:

do you happen to known how to redirect the customer to the page after switch the language?

I'm not sure that I understand your question. When the user chooses the alternative language, they should remain on the page, but see a translated version.

image.thumb.gif.5eff365cb521ad43239c69e320a249c9.gif

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Sorry, I should have explained that it worked the same for me on mobile too.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 month later...
  • 2 months later...
On 2/5/2024 at 3:54 PM, hello_studiofrey said:

Hello, is there a solution for the question from @NatureSwim ? We're looking for the same solution for our website: https://www.nsagarantie.com

Thanks a lot!
Natasa

You can search on Forum, I used to help a member achieved this, I don't remember the code but I provided code there. If you still can't find it, you can let me know, I will test code again

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/7/2024 at 8:50 PM, hello_studiofrey said:

Hello @tuanphan, unfortunately, I haven't found this exact problem anywhere in the forum solved. Could you please help me out? Thanks a lot!
 

Try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

div#multilingual-language-picker-desktop {}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.