How to install GTranslate free app to your Shopify store
GTranslate is a free Shopify app, that uses Google Translate automatic translation service to translate Shopify shop with Google power and make it multilingual. With 103 available languages your site will be available globally upon installation for free.
Compared to other translation apps for Shopify, this app offer most of their features for free. GTranslate is a leading website translation services provider since 2008. It moves away the language barriers increasing chances for successful conversion.
This post will teach you install GTranslate free app to your Shopify store.
Step 1: Install the app
Open Multilingual Shop by GTranslate app on Shopify app directory and click Get button. Log into your shop and click Install app button to install GTranslate into your shop. After the installation you will be directed to GTranslate app settings page.
Step 2: Configure the language selector
The configuration interface is pretty straightforward.
On GTranslate app settings page you can configure how the language selector should look like using the Widget look option. You can preview your changes instantly on the right side under Widget preview section. You need to correctly select the original language of your shop using Translate from option.
With Enable SEO & Edit translations paid option you can turn on our paid features which will enable your translated pages indexing in search engines and you will be able to edit the translations. This will make sure that your shop can be found by searching in different languages worldwide which will grow your sales. You can learn more about this option and benefits you will get with it on How to configure paid option for Shopify article.
With Show floating language selector option you can display the language selector on Top Right, Top Left, Bottom Right or Bottom Left corner of your shop. If you do not want it to appear like that, you can set it to No and use another approach to display the language switcher described in the end of this manual.
Show native language names option will display the language names in native alphabet.
In the Languages section you will see the list of available languages to choose from. You can reorder the languages by dragging and dropping them on that list.
If the language selector includes flags, you can use Alternative flags option to pick which country flag should be used for a particular language. For example you can use USA or Great Britain flag for English language, or use Brazil flag instead of Portugal flag for Portuguese language.
Note: By changing any option on the left side a preview will appear on the top right corner inside Widget Preview section.
If you wish to customize the language selector any further you can use Widget code (for advanced users) section, where you can edit HTML/CSS/JS codes of the language switcher.
Step 3: Add the language picker to your storefront
After the language selector is configured you can add it to your shop, so visitors can switch between languages.
You can use Show floating language selector option described previously to show the language selector in predefined locations like Top Left or Bottom Right, or you can use {% include 'gtranslate' %} snippet in your Shopify theme liquid files, which will render the language selector. This might be little technical and might need understanding of basic HTML coding.
Note: Our Live chat agents will be happy to correctly position the language selector for you (with limited access permissions to your shop).
Below you will see an example how to add the language switcher into your top menu with Shopify default Debut theme. Depending on a theme you use the steps and files to edit can differ, but the idea is the same.
Before you begin editing the theme, make sure that Show floating language selector option is set to No in GTranslate app settings page to not create a duplicate language switcher and Widget look is set to Flags with language name which will look nice inside the menu.
Go to Online Store > Current theme > Actions > Edit code to open the liquid files editor and open Snippets > site-nav.liquid file which contains the top menu code where we are going to add the language selector. In the end of the file before closing </ul> tag add <li>{% include 'gtranslate' %}</li> tag which will render the language selector as a new list item in the menu.
This will result in adding the language selector into the top menu.
Note: If your theme has a separate menu for mobile devices it will be required to add the language switcher into the mobile menu as well. The steps are very similar.
