Shopify 小技 言語ごとにCSSスタイルやコンテンツを変更する方法
Shopifyストアの英語ページ（多言語／越境）対応は、『Shopify Translate & Adapt』などのアプリを使用して比較的簡単に翻訳可能ですが、次のような問題が起こる場合があります。
1. 英語の文字数が多いためメニューにテキストが収まらずカラム落ちしてしまう。
※言語にあわせて適切なスタイルを指定する必要がある。（英語ページではメニューのfont-sizeを小さくする。）
2. 言語によって出し分けたいコンテンツがある。
※日本語ページと英語ページで異なるコンテンツを表示する必要がある。
この記事では、Shopifyストアの英語ページ（多言語／越境）対応で、言語ごとに異なるclassを付与してCSSスタイルを切り替えたり、言語によってコンテンツを出し分ける小技をご紹介します。
言語ごとに<html>タグへ異なるclassを付与
まずは、言語にあわせて適切なスタイルを指定する方法をご紹介します。
layout/theme.liquidファイルを修正します。
ファイルの修正を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『…』ボタンをクリックして『コードを編集』します。
※解説に使用しているのはDawnのバージョン10.0.0の画面です。
以下の<html>タグ部分を
<html class="no-js" lang="{{ request.locale.iso_code }}">
以下のように書き換えます。
<html class="no-js {{ localization.language.iso_code }}" lang="{{ request.locale.iso_code }}">そうすることで、現在選択されている言語にあわせて、<html>タグにISOコードと同じ名称のclass（ja、enなど）がつくため、言語ごとのスタイル調整が可能になります。
※Dawn、Craftのバージョン10.0.0にて、動作検証を行いました。
liquid objectの{{ localization.language.iso_code }}で、ストアで現在選択されている言語のISOコードを取得することができます。
CSSは以下のように指定します。
※elementの部分は任意です。
.ja element {
日本語ページ表示時のスタイル
}
.en element {
英語ページ表示時のスタイル
}言語によってコンテンツを出し分ける
続いては、liquidのobjectと条件分岐を使って、日本語ページと英語ページで異なるコンテンツを表示する例です。（liquidファイルに直接記述された内容以外は、翻訳アプリを使って内容を書き換えることも可能ですが、特定の言語のみで表示させたいsectionやsnippetsがある場合などにこの方法が便利です。）
出し分けをしたい箇所に以下の記述を追加します。
{% if localization.language.iso_code == 'ja' -%}
日本語ページのみで表示する内容
{%- elsif localization.language.iso_code == 'en' -%}
英語ページのみで表示する内容
{%- endif %}そうすることで、日本語ページと英語ページの表示内容を切り替えることができます。
もちろん条件分岐を追加することで、その他の言語にも対応可能です。
※ja、enのような2文字のIETF言語タグ（ISO 639-1）で条件分岐をしてください。
Shopify 小技 言語ごとにCSSスタイルを変更する方法 まとめ
この記事では、Shopifyストアの英語ページ（多言語／越境）対応によって生じる
- 英語の文字数が多いためメニューにテキストが収まらずカラム落ちしてしまう。
- 言語によって出し分けたいコンテンツがある。
などの問題を、liquidのobjectと条件分岐で解決する方法をご紹介しました。
Shopifyストアの英語ページ（多言語／越境）対応には、別記事『Shopify 小技 言語追加（多言語対応）で生じるリンク問題を解決』も参考になるかもしれません。
Shopifyのサイト構築に、少しでも役立てていただけると幸いです。
※2023年7月時点の情報です。テーマのアップデートやShopifyの仕様変更などにより、記事の内容通りに設定できない場合があります。
コマースメディア株式会社
国内3社目のShopifyエキスパートとして、サイトの制作・運営・物流までワンストップでサービスを展開しています。
ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。
