Knowledge Diary

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

Published: Updated:

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

こんにちは、Webデザイナーの 夢拓(Muhiro)です。

shopifyで多言語対応のオンラインストアを構築・運営していると、「英語と日本語で異なるバナーを表示したい」「中国語ページだけに注意文を入れたい」といった、言語ごとのコンテンツの出し分けが必要になる場面に遭遇します。
こうしたニーズに応えるためには、Shopifyのテーマ開発において、Liquidの条件分岐機能を活用することが不可欠です。
特に request.locale というオブジェクトを用いることで、現在のページで選択されている言語(ロケール)を判定し、それに応じた処理をテーマ内で動的に切り替えることが可能になります。

この記事では、その具体的な活用方法と実装のポイントを、開発者目線で詳しく解説していきます。

この記事を読んで、request.localeを活用した多言語対応の実践的なテクニックを使用して、最適・高度な・柔軟なWebサイトを制作いただけるようになります!

それでは、どうぞ!

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要素に対応可能です。

実務における活用例と応用の幅

このテクニックを実際の制作・運用に応用することで、以下のような対応が可能になります。

  • 特定言語ページにのみ、送料や対応エリアの注意文を表示
  • 英語圏のみ商品説明の文言を微調整して出し分け
  • 韓国語サイトにだけ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などが一般的に使用されますが、テーマで設定されていない言語コードを指定しても意味がありません。
言語が設定されているかは以下で確認ができます。

Shopify管理画面 > 設定 > 言語
  1. 設定から言語を選択します。
  2. 「公開済みの言語」に設定されている言語が使用することができます。

プレビューの際に正しくロケールが表示されない場合がある

テーマエディタなどでプレビューした際に、ロケールが正しく認識されないこともあるため、本番環境での確認は必須です。

コメントアウトなどで保守性を意識する

多言語ごとに独自の出し分けの数が多くなる場合は、Liquidコードが煩雑になりやすいので、必要に応じて部分テンプレートに切り出す・コメントを活用するなど、保守性を意識した設計が大切です。

まとめ

いかでしたでしょうか?
今回の記事では、Shopifyテーマにおいて request.locale を用いて言語ごとの処理を切り替える方法について解説しました。

今回のポイントをまとめますと、次のとおりです。

今回の記事のまとめ

  • request.locale.iso_codeを使うことで、現在の言語をLiquidで取得できる
  • 言語ごとのテキスト・画像・リンク出し分けが柔軟に可能になる
  • 他のLiquid変数と組み合わせることでさらに高度な処理が実装できる

他にもShopifyテーマ開発に関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします!

最後までお読みいただきありがとうございました!

免責聲明

  • 本部落格提供基於作者經驗的技術資訊與知識,但不保證其準確性或普遍性。資訊為撰寫時的內容,隨著技術進步可能會過時。使用這些資訊時請自行承擔風險。如有需要,建議您諮詢專業人士。
  • 本部落格所提供的程式碼是基於作者的最大努力,但不保證其準確性或完整性。因使用或執行程式碼而造成的任何損失或問題,本站概不負責。程式碼的使用請自行承擔風險。
  • 本網站所使用的截圖圖片之著作權,歸各該網站的權利人所有。如有不便之處,請透過聯絡表單與我們聯繫。
  • 透過本網站的連結跳轉到其他網站時,本站對跳轉後網站所提供的資訊、服務等概不負責。
  • 因本網站刊登的內容而造成的任何損失,本站概不負責,敬請見諒。