【Shopify】Online Store 2.0のテーマセクションをアプリで翻訳する【多言語対応】

※備忘としてブログ化。
※殴り書きなのでそのうち正式に書き直します。

Shopify Online Store 2.0のテーマを使って日本語・英語の越境ECサイトを構築していた

最近仕事でShopify Online Store 2.0のテーマを使って日本語・英語の越境ECサイトを構築していました。

使用したテーマは「impulse」。

Impulseのテーマ – Clean – Eコマースサイトのテンプレート

Impulse is a modern Shopify theme that empowers your brand with custom promotions, video and animations. Minimal design and mobile optimized.

themes.shopify.com

アプリで英語への翻訳ができない・・・？と戸惑う

Shopifyのpage（WordPressでいうところの固定ページ的なもの）をテーマセクションを使って構築していました。

初めてのShopifyテーマセクション作成

クライアントがストアのカスタマイズを望んでいるなら、そのためのクリエイティブな手段を提供することが大切です。

www.shopify.jp

過去、Shopifyで越境ECサイトはいくつか作成したことがあり、その際は翻訳アプリの「Translation Lab ‑ AI Translate」を使っていました。

無料の翻訳アプリの中ではかなり使いやすいアプリでおすすめです。

T Lab ‑ AI Language Translate – Multi Language Translation & Multi Currency – Sell Globally | Shopify App Store

Multi Language Translation & Multi Currency – Sell Globally

apps.shopify.com

で、今回も同じように「Translation Lab ‑ AI Translate」を使って翻訳しようと思ったのですが、テーマセクションに入力した日本語が翻訳対象に表示されない。

あれ・・・？

と思いながら、色々調べていました。

結論：Shopify Online Store 2.0のテーマセクションを翻訳アプリを使って多言語対応させる方法

結論、テーマセクションに保存されたテキスト（日本語）は「Translation Lab ‑ AI Translate」の管理画面の「Theme Sections e.g. Homepage」という項目から翻訳することができました。

手順を解説します。

Shopify Online Store 2.0対応のテーマでは、以下のようにテーマセクションを活用してページを構築できます。

コーディングしなくても、管理画面からテキストを入れたり、画像を入れたりできる訳ですね。前からできましたが、ノーコードで構築できる範囲が広がりました。

今回は例として「Rich text」ブロックに「ここに見出し」と入れてみました。

では、テーマセクションに入力したテキストを翻訳アプリを使って翻訳していきます。

使用する翻訳アプリは「Translation Lab ‑ AI Translate」です。

まず、アプリ管理から「Translation Lab ‑ AI Translate」を開きます。

「TRANSLATONS」タブをクリックします。

「Translation of」から「Theme Sections e.g. Homepage」を選択します。

選択した状態がこちら。

しばらくすると検索結果が表示されます。

以下のような画面が出るはずです。

上部の紫色の部分は左右にスクロールできるタブになっています。タブのひとつひとつがテーマセクションのブロックです。

左右の矢印アイコンでタブを移動できます。

ひとつのタブには複数の入力欄があり、

これらのタブと入力欄は、テーマカスタマイズ画面の以下のブロックと対応しています。

冒頭でも紹介しましたが、今回は「ここに見出し」と入れました。

検索窓に「見出し」と入れてみます。

すると、そのテキストが入っているセクションを絞り込んでくれます。

右側の空欄に翻訳を入れて、最後に「SAVE」を押して保存すれば完了です。

以上です。