How to make the front page of a cross-border EC site multilingual in 10 minutes with Shopify
Tags: shopify, webdev
Published: 2020-07-18 17:53:06

Shopify offers a way to make your site multilingual. But the standard admin feature doesn't have that capability and you need to install a translation app at this time.

In this article, I will show you how to use the app to make the front page of the store multilingual. I think that the work time is about 10 minutes because it is very easy.

## About a multilingual store used in this article

The following English store exist. I will make the front page of this site multilingual.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel_store_jp__1_.png)

This time I am using the theme "Debut" which is installed by default when you create a store with Shopify.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___themes___shopify.png)

## Install translation app

Various translation apps have been released. This time, I will use an application called [Interlingue](https://apps.shopify.com/interlingue?ref=mixlogue). Interlingue provides the functions to fully utilize the multilingual API provided by Shopiy. In addition, it is designed to prevent conflicts with other apps and themes, so you can use it with confidence.

Install Interlingue from [here](https://apps.shopify.com/interlingue?ref=mixlogue). There is a 7-day free trial period.

## Store language settings

When Interlingue is installed, the dashboard will be displayed, but if the language of the store is not set yet, the following message will be displayed. In that case please click "Go to Setting Page for Store languages". If you have already set the store language, proceed to the next step.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-3.png)

When the following screen is displayed, click "Add language".

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify.png)

The "Add a language" dialog will be displayed. Select the language you want to translate from English (eg Spanish, French, etc.) and click "Add".

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-4.png)

For example, if French is added, the display will be as shown below. At the moment, the language has been added to the site but it is not published to customers.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-5.png)

You can proceed with the translation in this state, but I want to proceed with the translation while checking the display on the site, so click "Publish" to make the language public.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-6.png)

Confirm the dialog and click "Publish" again.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-7.png)

French is published. Add any language in the same way.

Four languages are set here: Spanish, French, Portuguese, and Simplified Chinese.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-8.png)

The theme "Debut" used this time has a language switching function as standard equipment, so if you check the site at this point, you can see that the following language switching pulldown has appeared in the footer area.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp-2.png)

If you are using a theme that does not come standard with language switching, please install the GeoLocation app from [this link](https://apps.shopify.com/geolocation?ref=mixlogue).

[Check here](https://help.shopify.com/en/manual/apps/apps-by-shopify/geolocation?ref=mixlogue) for more information about the GeoLocation app.

## Translating the front page using Interlingue

Now, I would like to start translating with Interlingue.

![Image for post](https://blog.mixlogue.jp/images/uploads/mixlogue___account___shopify.png)

Select Interlingue from the application management menu to display it.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify-9.png)

The dashboard is displayed as above.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp___store_languages___shopify_1.png)

Click "Translate themes including top page and checkout text" at the top of the dashboard to move to Theme translation screen.

Then the following screen is displayed.

![Image for post](https://blog.mixlogue.jp/images/uploads/shopify-2.png)

Select the target language in the language name tab at the top and register the translated content. Here I will translate it into Spanish.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp_と_ダウンロード_と_google_翻訳.png)

For example, when translating the main visual "Fall is coming, let's go outside", enter the text you want to translate and press Enter. Then only the relevant content is displayed.

![Image for post](https://blog.mixlogue.jp/images/uploads/shopify-3.png)

Enter the translated text in the text box. Or click "Quick Translate with Google Translate" and the result of Google translation will be entered in the text box.

![Image for post](https://blog.mixlogue.jp/images/uploads/shopify_と_ダウンロード_と_dmdf4238285-44b9-482d-8121-7700a339fe68.png)

Similarly, translate "We have new products for autumn/winter 2020" and "View New Products".

![Image for post](https://blog.mixlogue.jp/images/uploads/shopify-4.png)

When the translation is complete, click Save to save the translation on Shopify's server.

Let's check the site.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp-4.png)

Select Español in the language selection pull-down at the bottom of the page.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp-5.png)

The text in the main visual has changed to Spanish!!

It's very easy.

The procedure for theme translation such as front page in Interlingue is like this.

1. In the "Theme" tab, enter the word you want to translate and filter
2. Enter the translated text or click "Quick Translate with Google Translate"
3. Save

Just repeat these steps.

## Translation of navigation

Some of the display elements on the front page cannot be translated using the above procedure. It's a navigation element.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp-6.png)

On this site, ↑ this part,

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp-7.png)

and, ↑ this part. These are managed as resources named "Navigation/Link" and will be translated differently. But the method is very simple,

![Image for post](https://blog.mixlogue.jp/images/uploads/shopify-5.png)

1. Open the Resource tab
2. Select "Navigation/Link" in resource type
3. Enter the translated text or click "Quick Translate with Google Translate"
4. Save

You can translate using the above procedure. Once the translation is complete, check the site again.

![Image for post](https://blog.mixlogue.jp/images/uploads/apparel-store-jp-8.png)

The navigation menu is now in Spanish!

## Lastly,

The front page was translated using the method described above. When constructing a cross-border e-commerce site, it is also necessary to translate product data and blogs/pages. I would like to add each translation procedure and points to note when converting to multiple languages.

Please try to make your site multilingual using Interlingue! If you have any questions about using the app and find it difficult to use or want to improve it, we would appreciate it if you could contact us. We would like to make the app easier to use and help deliver your products to overseas customers.