Shopify Language Switcher: Improve User Experience

Shopify language switcher is a useful native feature for multilingual stores. The device allows customers to view your site in their preferred language, enabling your brand to tap into new international markets. You can also customize the feature by using code, so it’s more in line with your brand’s aesthetic.

However, the native feature does have its drawbacks, including the absence of automatic geolocation switching and limited customizations when compared to third-party solutions.

By integrating a dedicated Shopify translation app, store owners can benefit from additional features that improve functionality, boost user engagement and take care of the actual translation part. For example, our own Shopify translation app Weglot, offers unique design and placement options for its language switcher, making it adaptable to any store layout. Plus, it does so much more than just allow users to switch languages. But more on that later.

In this article, we’ll show you how to get the most from Shopify’s native language switcher before exploring Weglot on Shopify, detailing best practices for translating your store and providing an optimal user experience.

Key Points

• Shopify’s native language switcher supports multiple languages but lacks automatic geolocation and customization compared to third-party apps.
• Weglot offers automatic website translation and extensive customization options for its language switcher. It also allows for fully manual editing and enhances multilingual SEO by creating language-specific URLs and implementing hreflang tags.

Shopify Language Switcher: An Overview

First up, let’s look at Shopify’s built-in language switcher. As we mentioned, this feature allows store owners to support multiple languages, so it naturally improves User Experience (UX) for international customers.

Remember that the Shopify language switcher does not automatically detect and display the language based on user preferences without additional customization or apps. Native functionality primarily supports manual language selection by the user.

To set up and customize the Shopify language switcher, you’ll need to follow these steps:

1. From your Shopify admin page, navigate to Settings > Languages and add the languages you want to support.
2. Go to Online Store > Themes, select your theme, and click on Edit code. Locate the header.liquid file in the Sections directory.
3. Find a suitable spot in the header.liquid file (commonly near the navigation menu) and paste the following Liquid code snippet:

<form action="{{ routes.root_url }}" method="get">  
 <select name="locale" onchange="this.form.submit()">    
  {% for locale in localization.available_locales %}      
   <option value="{{ locale | escape }}" {% if locale == localization.current_locale %}selected{% endif %}>        
    {{ locale.name }}      
   </option>    
  {% endfor %}  
 </select>
</form>

4. Now your switcher is in place. To match your store’s design, you can add custom CSS rules in your theme’s stylesheet. If required, using specific selectors like select [name=”locale”] can prevent the unintended styling of other select elements of a page.

Here’s an example to change the background color:

select {    
background-color: #fff;    
 border: 1px solid #ccc;    
 padding: 5px;
}

And here’s how to style the switcher’s font and text color:

select {    
font-family: 'Arial', sans-serif; /* Change font type */    
 font-size: 16px; /* Set font size */    
 color: #333; /* Text color */
}

select option {    
background-color: #f9f9f9; /* Background color for options */    
 color: #555; /* Text color for options */
}

You can also add hover effects and alter your border sizes:

select {    
border-radius: 5px; /* Rounded corners */    
 border: 2px solid #007bff; /* Blue border */}

select:hover {    
border-color: #0056b3; /* Darker blue on hover */    
background-color: #e9ecef; /* Light gray background on hover */
}

5. After making your edits, click Save to apply them. The language switcher should now appear in your store according to your preferences.

Enhancing Shopify Stores with Weglot's Language Switcher

While the native Shopify language switcher is functional, dedicated Shopify translation apps like Weglot offer greater customizations, along with additional Shopify translation features for those looking to truly localize the store experience for their international customers.

Unlike the Shopify language switcher, Weglot automatically translates 100% of the site content from a choice of 110+ languages, including checkout pages, email notifications, and SEO metadata, optimizing it for search engines.

With Weglot, your entire Shopify store benefits from automatic translation, accelerating expansion projects. Compared to hiring individual translators for each language, Weglot’s automation significantly reduces the time to market for new language versions.

However, Weglot’s capabilities don’t stop at automated translation. With Weglot, you get complete editing control over the translated content on your site. You can also hire professional translators directly through the platform.

Weglot also integrates with Shopify’s existing features and popular third-party apps, including customization for themes like Dawn and Prestige. This eliminates the hassle of managing multiple stores or manual translations, as you can add, publish, unpublish, or delete languages as needed.

Weglot also takes care of more than just translation, with multilingual SEO benefits at the app’s core. The platform automatically creates subdomains or subdirectories for each language version and implements hreflang tags, optimizing your site for local search engines. Plus, our Visual Editor allows for easy customization of translations, enabling fine-tuning to match your brand’s voice.

Best of all, setting up Weglot and customizing your language switcher can be achieved in a matter of moments! Let’s take a look.

Setting up Weglot on Your Shopify Store

Setting up Weglot on your Shopify store is really straightforward. Here’s a guide to get you started:

1. Begin by visiting the Shopify App Store:

• In the search bar, type Weglot and locate the Weglot app.
• Click on Install and follow the prompts to add it to your store.

2. After installing the app, you’ll need to set up an account:

• Open the Weglot app from your Shopify dashboard.
• Enter your email address and choose a password.

3. Configure your language settings:

• Next, select your original language (the language of your Shopify store).
• Then, choose the target languages into which you want to translate your content.

After selecting your languages, Weglot will automatically scan all the content on your store, including metadata and content from third-party apps. Automatic detection means you won’t have to manually gather content for translation, as Weglot does it all for you!

Then, your site is instantly translated using leading machine translation and displayed under language subdirectories or subdomains, depending on the structure you’ve chosen in the Weglot Dashboard.

Customizing Weglot's Language Switcher: Design and Placement Options

Extensive customization options are available for Weglot’s language switcher, allowing you to tailor it to fit your store’s branding for a super-professional end result. Here’s how to customize it:

1. Access the visual language switcher editor: Go to your Weglot Dashboard and navigate to Settings > Language Switcher.
2. Change appearance: Choose from various formats like dropdowns, buttons, or flags to display language options. For example:some text
   • Use flags for quick recognition.
   • Opt for buttons for a more prominent display.

3. Adjust position: You can place the switcher in key areas such as the header, footer, or sidebar, depending on what works best for your layout.
4. Modify colors and styles: Customize colors and styles in the Weglot settings to align with your store’s branding.

Importantly, the language switcher can be repositioned easily without any theme modifications, ensuring that it remains accessible and user-friendly across different pages of your store. For advanced placement, see our section below on Overcoming Common Challenges in Shopify Store Localization.

Advanced Customization: Coding Tips for Developers

For developers looking to enhance their Shopify stores with Weglot, customization can be key to creating a tailored multilingual experience. Weglot’s flexibility gives developers the power to create customized multilingual experiences while remaining user-friendly for non-technical users.

Here are some coding tips to consider:

Using CSS for Fine-Tuning Language Switcher Appearance

Developers can modify styles such as background color, font size, and padding to match the store’s branding. For example:

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

Implementing JavaScript for Custom Functionality

Developers can use JavaScript to trigger specific actions when a language is selected, such as updating other elements on the page or tracking language changes for analytics. For instance, you could implement an event listener:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="locale"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

Implementing Weglot for Seamless Page Transitions Across Languages

One of Weglot’s key features is the automatic creation of language-specific URLs, such as example.com/fr for French versions of your site. A sound URL structure ensures that search engines can index each language version, improving your multilingual SEO efforts.

Weglot helps customers switch languages easily during their shopping experience, whether browsing products or checking out. When a customer switches from an e.g. English product page to its (e.g., Spanish) equivalent, they experience a fluid transition without losing their place in the shopping journey. Such features can impact key metrics like time on site and conversion rates, improving customer satisfaction and ultimately driving global growth.

To give an example, Everyone.org – which used Weglot to create a multilingual website in 12 languages – experienced a 40% increase in total visitors, with French-speaking users converting at nearly double the average sitewide conversion rate.

Optimizing Multilingual SEO and Maintaining Page Consistency

Multilingual SEO ensures that your products are discoverable by users searching in different languages, driving online traffic. A fundamental aspect of multilingual SEO is having a proper URL structure, and using subdirectories helps search engines identify and rank different language pages.

Hreflang tags play a significant role in this process by informing search engines about the language and regional targeting of your pages. This helps direct users to the most relevant version of your site.

Translated metadata, including title tags and descriptions, further contributes to better search visibility. Weglot automates much of the technical SEO work, automatically creating language-specific URLs and implementing hreflang tags without requiring manual intervention.

Additionally, Weglot’s Visual Editor and language glossary allow store owners to maintain translation consistency.

To go the extra mile with multilingual SEO, Shopify store owners can do the following:

• Conduct localized keyword research for each target market.
• Ensure all content, including metadata, is accurately translated.
• Regularly review translations to reflect changes in language trends.

Remember, effective multilingual SEO can lead to increased market opportunities! After implementing Weglot for multilingual optimization, Ron Dorff, a Shopify store, discovered significant demand from the German market, which had previously been untapped. By translating their content and optimizing for SEO, they saw an incredible 400% rise in international sales.

Overcoming Common Challenges in Shopify Store Localization

Localizing Shopify stores comes with meeting some unique challenges, but Weglot offers effective solutions to ease you through the process.

To change the position of the Weglot language switcher on a Shopify site, you can use one of the following four methods:

1. Switcher Editor Feature

Utilize the Switcher Editor to drag and drop the language switcher directly on a live preview of your website. This method requires your site to be live.

2. Add to a Menu

Create a custom language switcher in your main menu by linking it to Weglot translations. Navigate to Shopify Admin > Online Store > Navigation, add menu items for each language using the format #Weglot-language (e.g. #Weglot-en for English). You can also create a drop-down menu for languages.

3. Weglot_here Option

Insert the following code snippet into your Theme.liquid file at the desired location:

<div id="weglot_here"></div>

This code will place the language switcher where you place the code, addressing common placement limitations discussed in community forums.

4. Switcher Option

Manually integrate the switcher by modifying your Weglot initialization code in weglot_switchers.liquid. Include the Switchers option and specify the target CSS selector for where you want the switcher to appear:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

Make sure to replace .header-nav with your desired element’s CSS selector.

You’ll also gain the following localization benefits from using Weglot:

• Dynamic content translation: Weglot effectively translates JavaScript-generated content and AJAX-loaded elements, ensuring that all dynamic content is captured and translated.
• Multilingual SEO for Shopify: Weglot automates the implementation of hreflang tags and creates language-specific sitemaps. This complements Shopify’s built-in SEO features, allowing search engines to serve the correct language version to users.

• Translating Shopify-specific elements: Weglot handles translations for the whole of your store, including checkout pages, email notifications, and meta fields, overcoming limitations outlined in Shopify's documentation. For instance, while the checkout language is typically fixed, Weglot allows the checkout to reflect the user’s selected language.

• Optimizing translation workflows: Weglot’s translation memory and glossary features help you maintain consistency across a large product catalog. This ensures that terms are uniformly translated, ensuring your brand message is coherent across different languages.

Comparison of Weglot and Native Shopify Language Switcher

Shopify provides users with the basic tools needed to translate their stores into multiple languages, but limitations exist.

In contrast, Weglot offers a comprehensive translation solution and meets Shopify’s limitations head-on. As a result, the platform is a more suitable option for users who want a hands-off approach to multilingual content management.

Overcome Language Barriers: Implement Weglot on Your Shopify Store

As we’ve seen, Weglot offers unique advantages for Shopify stores, making it the ideal solution for overcoming language barriers online. With Weglot’s language switcher, you gain added customizations to improve UX, while the Visual Editor allows for in-context translations, enabling you to refine content wherever needed. You can even order professional translations directly from the dashboard for greater accuracy.

Weglot integrates with popular Shopify apps, including smart search tools and image galleries, ensuring your store remains fully functional in multiple languages. Additionally, our platform creates language-specific subdomains or subdirectories, significantly boosting your SEO efforts.

Best of all, Weglot is compatible with all content management systems, meaning if you move away from Shopify, you don’t need to lose the benefits of Weglot.

Start your 10-day free trial with Weglot today and enjoy a multi-language site in minutes!