Shopify のテーマ開発で多言語化対応をする

こんにちは。Gaji-Labo 横田です。今日はEコマース用のプラットフォームである Shopify のテーマ開発で、多言語化（ローカライズ）の対応方法を紹介します。

はじめに

Shopify の多言語化対応についてはヘルプセンターのローカライゼーションと翻訳に説明があります。
前提条件として、ベーシックプラン以上の利用、多言語化に対応したテーマを使用していることが挙げられています。Shopify の無料テーマは全て互換性があるとのことで、そのうちの一つである Debut テーマも多言語化対応しています。

Debut テーマでの対応

Debut テーマでの対応は、設定 > 言語 > 言語を追加 ボタンで任意の言語を追加します。新言語の準備ができたら 公開 ボタンを押すだけです。これでストア内に多言語の URL が自動的に発行され、仮に英語であれば shop.com/en/ というURLでアクセスすることができるようになります。便利。
この時 Shopifyは、クローラーにインデックス登録してもらうため Hreflang タグにサイトマップ内の公開済みの言語すべてを自動的に追加してくれるみたいです。

Debut テーマのデフォルトのフッターには、国/地域セレクターと言語セレクターの表示設定が用意されているので、これらのチェックをオンにすれば、決済通貨と言語の選択を簡単に表示できます。
ただし、言語セレクターは言語を [公開] して初めて表示されるようになるので注意です。

Shopify Geolocation アプリ

使用テーマに国/地域セレクターと言語セレクターの用意がない場合などは、無料の Geolocation アプリをインストールすれば、国/地域セレクターと言語セレクターを表示させることもできます。
このアプリではユーザーに国や言語の切り替えをうながすポップアップを表示させることもできるようですね。これも便利。

Shopify Translate & Adapt アプリ

テーマを多言語化対応できたら、次はショップ内のコンテンツを翻訳する必要があります。Shopify では、ストアに新しい言語を追加すると Translate & Adapt という翻訳アプリが自動でインストールされるようになりました。
サイト内のコンテンツを自動で翻訳してくれ、2言語まで自動翻訳が無料です。
アプリに入り、自動翻訳ボタンを押すだけで、まだ自動翻訳されていないコンテンツが翻訳されます。便利すぎる。

管理画面も直感的で分かりやすいです。
自動翻訳されたテキストを手動で追加修正した場合は、自動翻訳を再度かけてもそのまま残ります。
また、新しいコンテンツを追加の際は、自動翻訳を再度かければ簡単に翻訳を追加できます。
ただし、以下は Translate & Adapt アプリで翻訳をかけることができないので注意です。

• 外部アプリのコンテンツ
• 画像や動画などのメディア系
• メタフィールドリストのタイプ
• タグやURL

さらに、liquid ファイル（テンプレート）に直接記載したテキストや、schema の type を html や liquid で作成したコンテンツも Translate & Adapt アプリの管理画面で翻訳ができません。このあたりは既存テーマを元に開発する上で留意しておきたいところだと思います。

終わりに

多言語化の対応には他にも、さまざまな決済方法を準備する、現地通貨を設定する、配送方法を設定することが必要になります。
Shopify には便利なアプリがいずれも存在しているので、多言語化対応のハードルが下がりますね。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。