【Shopify】ECサイトを簡単に多言語対応する方法
はじめに
株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はShopifyを使って構築したECサイトを多言語対応にする方法を紹介します。
Shopifyが提供している「Translate & Adapt」というアプリを使って多言語対応を簡単に実現する方法を解説します。
ECサイトを多言語対応することは海外の顧客をターゲットにするためにとても重要です。この記事を読めばあなたのECサイトがさまざまな言語に対応できます。
対象読者
- Shopifyを構築したECサイトを運営している方
- これからShopifyでECサイトを構築しようと考えている方
使用テーマ
ShopifyのテーマはDawnを使用します。
別のテーマを使用する場合は細かい設定が異なることがあるのでご注意ください。
設定方法
1.Shopifyテーマの言語の追加
まずはShopifyのテーマを多言語対応にするための言語を追加していきます。
言語の追加手順
-
Shopify管理画面「設定」>「言語」を選択
-
任意の言語を追加
-
追加した言語を公開
2.Translate & Adaptアプリのインストール
次に、Shopifyのアプリ「Translate & Adapt」をインストールします。
「Translate & Adapt」は追加した言語の翻訳文を作成するためのアプリで、商品のタイトル、説明文、各ページのタイトルやコンテンツなど、ECサイト内のさまざまなコンテンツを簡単に翻訳できます。
インストール手順
-
Shopify管理画面から「アプリ」>「Shopify App Store」を開き、「Translate & Adapt」を検索
-
アプリのページに移動しアプリをインストール
3.翻訳の追加方法
アプリのインストールが完了したら翻訳文の追加をしていきます。
Translate & Adapt の項目一覧
| 項目名 | 翻訳できる内容 |
|---|---|
| コレクション | コレクションのタイトル、説明文 |
| 商品 | 商品のタイトル、説明文、URLハンドル、商品タイプ |
| ブログ記事 | ブログ記事のタイトル、コンテンツ、抜粋文、URLハンドル |
| ブログタイトル | ブログのタイトル、URLハンドル |
| Cookieバナー | プライバシーポリシーリンク、タイトル、本文、設定管理ボタン、承諾ボタン、拒否ボタン、プライバシーポリシーURLのハンドル |
| 絞り込み | 各絞り込みのLabel部分 |
| メタオブジェクト | メタオブジェクトのLabel部分 |
| ページ | 各ページのタイトル、コンテンツ、URLハンドル、メタタイトル、メタディスクリプション |
| ポリシー | 各ページのコンテンツ |
| ストアのメタデータ | トップページのメタタイトル、メタディスクリプション |
| メニュー | 各メニューのタイトル、メニュー項目 |
| 埋め込みアプリ | アプリによる |
| デフォルトのテーマコンテンツ | テーマでデフォルトで設定されている項目 |
| セクショングループ | ヘッダーグループやフッターグループの内容 |
| 静的セクション | テーマ内の静的なセクション |
| テンプレート | 各ページのテンプレート内の動的セクション |
| テーマ設定 | テーマ内のロゴやSNSリンク |
| 通知 | 商品の注文や購入、返品の際の通知 |
| 配送と配達 | 配送方法の名称、明細表 |
今回は「私たちについて」ページの翻訳文を設定してみます。
翻訳文設定手順
-
Translate & Adaptのアプリを開く
-
翻訳文を追加したい項目を選択(今回はページ)
-
画面中央上部から翻訳文を作成する言語を選択
-
翻訳文を追加したいページを選択(私たちについて)
-
左側にデフォルトの言語、右側に翻訳したい言語が表示されるので、右側に翻訳文を入力(2言語までAIによる自動翻訳が可能)
4.言語セレクターの設置
セレクター表示手順
-
Shopify管理画面「オンラインストア」>「テーマ」>「カスタマイズ」を選択
-
ヘッダーセクションから「言語セレクターを表示」を有効化
マーケットについて
今回はECサイト内で複数の言語を表示するための多言語対応について紹介しましたが、特定の国や地域向けに通貨、価格設定、税率、配送設定などを実施するためのマーケット機能もShopifyには存在します。そちらの設定方法も別の記事で紹介します。
終わりに
今回はShopifyを使って構築したECサイトを多言語対応にする方法を紹介しました。
この記事を参考にShopifyが提供している「Shopify Translate & Adapt」というアプリを使って多言語対応をしてみてください。
この記事を書いた人
