BLOG ECブログ : Shopify and more

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の仕様変更などにより、記事の内容通りに設定できない場合があります。

Related Works その他事例

RUN-WALK Style 公式通販サイト

  • サイト改修・開発
  • サイト構築
  • 物流サポート

ドズル社ストア

  • サイト改修・開発
  • サイト構築
  • 物流サポート
  • 運営代行

NAVAL オンラインストア

  • コンサルティング
  • サイト改修・開発
  • サイト構築

HALEO 公式通販サイト

  • コンサルティング
  • サイト改修・開発
  • サイト構築
  • 物流サポート
CONTACT
ご相談や依頼、お見積りをご希望の方