Skip to main content
All CollectionsHow-tos
How to setup GTranslate free app on Shopify?
How to setup GTranslate free app on Shopify?
Edvard avatar
Written by Edvard
Updated over 6 years ago

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.

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.

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.

Did this answer your question?