Shopifyテーマカスタマイズの多言語化!Liquidのrequest.localeを使って言語ごとに処理を分ける方法の解説
Published: Updated:

こんにちは、Webデザイナーの 夢拓(Muhiro)です。
shopifyで多言語対応のオンラインストアを構築・運営していると、「英語と日本語で異なるバナーを表示したい」「中国語ページだけに注意文を入れたい」といった、言語ごとのコンテンツの出し分けが必要になる場面に遭遇します。
こうしたニーズに応えるためには、Shopifyのテーマ開発において、Liquidの条件分岐機能を活用することが不可欠です。
特に request.locale というオブジェクトを用いることで、現在のページで選択されている言語(ロケール)を判定し、それに応じた処理をテーマ内で動的に切り替えることが可能になります。
この記事では、その具体的な活用方法と実装のポイントを、開発者目線で詳しく解説していきます。
この記事を読んで、request.localeを活用した多言語対応の実践的なテクニックを使用して、最適・高度な・柔軟なWebサイトを制作いただけるようになります!
それでは、どうぞ!
Shopify開発を勉強したい方におすすめの書籍
Index
[ CloseOpen ]
requestオブジェクトとは?基本概念を理解しよう
ShopifyのLiquidテンプレート言語で使用できるrequestオブジェクトは、現在のHTTPリクエストに関する情報を提供する重要なLiquid変数です。
このオブジェクトを使用することで、現在のリクエストに基づいて動的にコンテンツを変更したり、特定の条件下でのみコードを実行したりできます。テーマのカスタマイズや条件付きコンテンツの表示に非常に有用です。
requestオブジェクトのプロパティ一覧を紹介!
以下の記事で requestオブジェクトのプロパティについての解説もしています。あわせてご覧ください!
request.localeとは?Shopifyにおけるロケール判定の基本
Shopifyでは、訪問者が選択した言語(ロケール)情報をLiquidの request.locale オブジェクトを使って取得できます。
このオブジェクトは、訪問者が現在閲覧しているページがどの言語設定にあるかを判定するのに便利です。
例えば、日本語がデフォルトで、英語、中国語、韓国語に対応しているストアであれば、訪問者が英語を選択しているときは request.locale.iso_code がenになります。
これを条件分岐に使うことで、HTMLやテキスト、画像の表示切替を実現できます。
このように、翻訳だけに頼らず、ユーザー体験に合わせた柔軟なテーマ構築が可能になります。
Liquid内での条件分岐がしっかり理解できていれば、カスタマイズの幅は大きく広がります。
実装例:言語ごとに注意書きを出し分ける
では、実際のコードを見てみましょう。
以下のように、 request.locale.iso_code を使って、言語ごとに異なる注意書きを表示することができます。
Liquid
{%- liquid case request.locale.iso_code when 'en' // 英語 assign multilingual_note = 'This page has been automatically translated. Accuracy is not guaranteed.' when 'zh-CN' // 簡体 assign multilingual_note = '本页面已经过自动翻译。不保证准确性。' when 'zh-TW' // 繁体 assign multilingual_note = '本頁面已經過自動翻譯。不保證準確性。' when 'ko' // 韓国語 assign multilingual_note = '이 페이지는 자동 번역되었습니다. 정확성은 보장되지 않습니다.' else // 日本語 assign multilingual_note = blank endcase -%} {%- unless multilingual_note == blank -%} // 日本語以外の場合、文章を表示します。 <p>{{ multilingual_note }}</p> {%- endunless -%}
このようにcase文とwhenを活用することで、言語ごとに異なる表示内容を分岐させることができます。
この構文は非常にシンプルで、任意の要素に出力することで、通知・バナー・フッターなど、さまざまなUI要素に対応可能です。
Shopify開発を勉強したい方におすすめの書籍
実務における活用例と応用の幅
このテクニックを実際の制作・運用に応用することで、以下のような対応が可能になります。
- 特定言語ページにのみ、送料や対応エリアの注意文を表示
- 英語圏のみ商品説明の文言を微調整して出し分け
- 韓国語サイトにだけSNSのリンク先を別のアカウントに変更
- 中国語ページで決済手段の注意点を表示
これにより、ユーザーの文化圏・言語背景に合った情報提供が可能になり、ストア全体のUX向上に貢献します。
特に国際マーケットを視野に入れているブランドでは、各国ユーザーに応じた適切な表現が売上にも直結します。
他のLiquid変数との連携テクニック
request.locale は単体で使うだけでなく、他のLiquidオブジェクト(例:request.path, customer, cartなど)と組み合わせることで、さらに高度な出し分けが可能です。
例えば、特定のページと特定のロケールが組み合わさったときだけ処理を実行するような条件分岐も以下のように実装できます。
Liquid
{% if request.locale.iso_code == 'en' and request.path contains '/collections/sale' %} {% endif %}
こうした組み合わせを工夫することで、柔軟で効率的なテーマ設計が実現します。
Liquidの文法とShopify独自のオブジェクトを理解していくことが、開発者としてのスキルアップにもつながります。
実装時の注意点とベストプラクティス
便利なrequest.localeですが、使用時にはいくつかの注意点もあります。
言語の設定をしないと動作しない場合がある
カスタマイズを実装する際は、対応するロケールコードが正確であることを確認しましょう。
Shopifyではen, ja, zh-CN, zh-TW, koなどが一般的に使用されますが、テーマで設定されていない言語コードを指定しても意味がありません。
言語が設定されているかは以下で確認ができます。

- 設定から言語を選択します。
- 「公開済みの言語」に設定されている言語が使用することができます。
プレビューの際に正しくロケールが表示されない場合がある
テーマエディタなどでプレビューした際に、ロケールが正しく認識されないこともあるため、本番環境での確認は必須です。
コメントアウトなどで保守性を意識する
多言語ごとに独自の出し分けの数が多くなる場合は、Liquidコードが煩雑になりやすいので、必要に応じて部分テンプレートに切り出す・コメントを活用するなど、保守性を意識した設計が大切です。
Shopify開発を勉強したい方におすすめの書籍
まとめ
いかでしたでしょうか?
今回の記事では、Shopifyテーマにおいて request.locale を用いて言語ごとの処理を切り替える方法について解説しました。
今回のポイントをまとめますと、次のとおりです。
今回の記事のまとめ
- request.locale.iso_codeを使うことで、現在の言語をLiquidで取得できる
- 言語ごとのテキスト・画像・リンク出し分けが柔軟に可能になる
- 他のLiquid変数と組み合わせることでさらに高度な処理が実装できる
他にもShopifyテーマ開発に関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします!
最後までお読みいただきありがとうございました!
関連記事 Related articles
-
Published:
Updated:【Shopifyテーマカスタマイズ】Liquidテンプレート言語のrequestオブジェクトについて解説!
ShopifyのLiquidテンプレート言語におけるrequestオブジェクトは、ページの表示内容を動的にコントロールするために役立つ強力な機能です。特に、ユーザーがアクセスしているURLや言語設定、デバイス情報などを取得し、これに基づいて条件分岐を行うことで、より柔軟でパーソナライズされたページ作成が可能になります。このリクエストデータを活用することで、多言語対応ページやデバイスに応じたレイアウト変更、特定の条件下でのプロモーション表示などがLiquidコード内で実装して最適化をすることができます。
-
Published:
Updated:Shopifyテーマカスタマイズでページタイプごとに処理を分ける方法|Liquidのrequest.page_typeで条件分岐を実装
Shopifyテーマでページごとに表示を切り替えたい方へ。Liquidのrequest.page_typeを使った条件分岐の実装方法と活用例を丁寧に解説します。
Disclaimer
- This blog provides technical information and knowledge based on the author’s experience, but does not guarantee their accuracy or universality. The information is current as of the time of writing and may become outdated due to technological advances. Please use this information at your own risk. We recommend seeking professional advice if necessary.
- The program code provided on this blog is based on the author’s best knowledge, but its accuracy and completeness are not guaranteed. We are not responsible for any damages or issues arising from the use or execution of the code. Please use the code at your own risk.
- Copyrights for any screenshot images used on this site belong to the respective rights holders. If there is any issue with the publication, please contact us via the contact form.
- If you move to another site via a link from this site, we are not responsible for the information, services, etc., provided at the destination site.
- We are not responsible for any damages resulting from the content published on this site.