【Shopify】Liquidでストア言語設定に基づく表示の切り替え方法

悩む人

英語の時だけこれを表示するにはどうすればいいの？

こんな疑問にお答えします。

日本国内だけではなく、海外に向けても商品を販売している場合、ストアに複数の言語を設定しているかと思います。

その場合に、「日本語の時はこれを表示して、英語の時はこれを表示」みたいなことがしたい場合もあるかと思います。

今回は、そういったストアの言語設定に基づくLiquidでの表示切り替えなどをする方法について解説していきます。

トマトソース

3行でできるぐらい簡単です！

ストアの言語設定に基づいた表示の切り替え方法

結論としては、以下のような記述をすれば言語に基づいた表示の切り替えができます。

{% if request.locale.iso_code == 'ja' %}
　日本語の場合のコンテンツ
{% else %}
　日本語以外の場合のコンテンツ
{% endif %}

トマトソース

簡単ですね！

もし日本語以外の言語にも対応したい場合は、

{% elsif request.locale.iso_code == 'en' %}

のようにして、elsifを足せばその分の条件分岐ができるようになります。

ちなみに、上記のコードの場合だと英語の言語設定の場合に利用できます。

ストアの言語設定に基づいた表示切り替えの使用例

それでは、以下で先ほどのコードを用いた使用例をいくつか紹介します。

例1：言語別に別のスニペットを表示する

{% if request.locale.iso_code == 'ja' %}
  {% render 'card-product' %}
{% else %}
　{% render 'card-product2' %}
{% endif %}

上記では、言語が日本語の場合にcard-productを表示し、日本語以外の場合にはcard-product2を表示するようになっています。

例２：言語別に省略までの文字数を変更する

{% liquid
  assign truncate_length = 50
  if request.locale.iso_code == 'ja'
    assign truncate_length = 32
  endif
%}
<div class="blog-content-info">
  <h3>
    {{ article.title | truncate: truncate_length | escape }}
  </h3>
</div>

上記コードはLiquidタグを使っているため、少しレベルが上がります。

このコードでは、デフォルトで50文字以降は「…」と省略されるようにしているのに対し、日本語の場合は32文字目以降を「…」と省略するようにしています。

Google検索ではタイトルは32文字目までしか表示されないという性質があるため、それに準じてブログカードのタイトルを変更するような時に使えます。

Shopifyの言語設定による表示切り替えは簡単！：まとめ

今回は、海外向けにも販売しているストアの言語設定に基づいたLiquidでの表示切り替えの方法について解説しました。

言語によって見栄えが変わったりすることもよくあるので、こういった言語に基づいた切り分けができるとかなり便利かと思います。

ぜひ、使いこなしておしゃれでオリジナルなストアを作ってみてください。

今回はここのStackOverflowを参考にしました。