Translating Custom Fields using Langify

In this advanced tutorial, we'll show you ways to set up product fields and create custom translations for their values with Langify.

finished_product.png

Langify is a Shopify store application that allows you to translate your Shopify stores to other languages. It has a free trial of 7 days, then you can pay for it for (at time of writing) $17.50/ month.

In this example, we will walk you through field creations. We'll show you where the code goes, no changes necessary.

*Disclaimer: Langify changes theme code to implement it's own code. 

1.) Purchase and install Langify to your Shopify store here.

 You may need to upgrade your Shopify account in order to purchase this.

 Get.png

2.) Enter your store name and follow instructions to complete the installation. 

You will be greeted with the Welcome screen, now we must complete the first time setup.

start1.png

2.2) Enter the site's original language

start2.png

2.3) Enter the language you want to translate to.

In this example we chose German, you can choose whatever you like and it will work similarly.

start3.png

3.) Now that we are done setting up, we need to go to the Language Tab under Settings.

CONGRATULATIONS.png

3.2) Copy the default Language ID, we need this for a global field we will create in Custom Fields.

CopyDefaultLanguageCode.png

4.) In Custom Fields, create a global text field titled "Langify Default Language Code" and click Save New Field.

2019-03-19_1638.png

4.2) Click on Edit Globals and paste the language ID in the text box and click Save

2019-03-19_1640.png

5.) Create or have a new product text field and title it whatever you would like. This is the field that will be translated through our custom code!

For this tutorial, we will name it Product Description and will explain later what you will need to change for your fields to work as well. Don't Exclude this field from Display.

2019-03-19_1641.png

6.) Click on Search and Edit Custom Fields on the product of your choosing.

2019-03-19_1645.png

Fill in that field with some value, this will be the text that we translate in Langify.

2019-03-20_1111.png

Create a Liquid Template field under globals for our code. Call it what you would like since it only shows on the admin side, but for the example, we are naming the machine name "langify_prod_temp". You can edit your machine name as well by clicking on the Edit. You don't have to Exclude this from display because our custom code doesn't print anything by itself. It only translates it

2019-03-20_1119.png

2019-03-20_1125.png

Paste this code into the new field's Snippet Editor. Replace the previous code. This code allows us to easily translate any field in Custom Fields.

2019-03-20_1126.png

Before leaving this page! Be sure to copy the include statement (below Edit Code section). We will need this for the next step!

This code is to automatically translate any specific metafields with translated content when the language switcher is in the active language. If you want more information on this type of field, we have an article on Liquid Templates.

Make sure to click Save Field Settings when you're done.

7.) Edit the field you want to translate in Custom Fields.

In order for our new translator to work properly, we need to include it in our other field and print the translation we assigned earlier. Add , machine_name: 'YOURMACHINENAME' to the end of the include statement. Use the machine name that is given to you by Custom Fields in the YOURMACHINENAME part. 

2019-03-20_1129.png

Tip: For every new field that you would like to translate, follow this same format (ie. include statement with machine name at the end, replace old print statement with new translation one). This will ensure that all your new fields get translated properly!

8.) Back in Langify, go to Shop > Metafields > Products > YourProduct 

ShopMetafields.png

Next, enter a custom translation for your metafield.

translation.PNG

9.) Now that we have a translation, we need to publish it.

Click on Publish Translations at the top of the page

Publish_Translations.png

9.2) This will bring you to the guide where you will begin the publication process.

Publishguide1.PNG

9.3) Click Start Guide to advance

publishguide2.PNG

9.4) Select the language you want to publish (German in our case)

Publishguide3.PNG

9.5) Click on your main theme or the theme where you want it to appear.

copy.PNG

9.6) This part is important, copy the red include statement, then click on the "Here" text to bring you to theme.liquid.

This code will add a drop-down language selector menu.

10.) Paste include statement right below the body tag. 

Ctrl+F and search for body, paste the code right below the first body opening tag. Alternatively, you could add this code elsewhere in your store, but placing it at the top of the body tag will have it appear at the top of your store page everytime.

PastedCode.png

Make sure to click Save after you finish.

11.) Test your work!

Open up the product page and switch the language at the top of the page, It will change to your updated translation!

finished_product.png