Shopify（ショッピファイ）で使える Liquid の便利な条件分岐

Shopify（ショッピファイ）でサイトを運営していて、特定のページだけ表示を切り替えたい時は Liquid の条件分岐を利用すれば便利です。

たとえば、特定の商品ページだけに追加情報を記述したり、特定のページだけ head 内に JavaScript を挿入したいといったシーンが該当します。

また、無料で使えるアプリ（プラグイン）でカスタムフィールドと条件分岐を併用すれば、思い通りのページを作成することも可能になります。

Shopify 商品ページの条件分岐

{% if product.images.size > 1 %}
// 商品画像が２点以上ある場合に記述。スライダーのサムネイル一覧などを表示。
{% endif %}

{% if product.has_only_default_variant == true %}
// バリエーションが無い場合
{% else %}
// バリエーションがある場合
{% endif %}

{% if product.type == "フルーツ" %}
// 商品タイプが「フルーツ」の時のみ表示する
{% endif %}

ワードプレスで言う「固定ページ」に相当するページを、条件分岐によって切り分けたい場合に使用します。

ページのオブジェクトはいくつかありますが、 handle オブジェクト（ワードプレスで言うパーマリンク）を用いた分岐が実用的かと思います。

例えば、 sample.com/pages/hoge といったページであれば、下記のような条件分岐の書き方をすることで、該当ページのみ表示の有無などを実現することができます。

{% if page.handle == 'hoge' %}
// hoge のページのみ表示するコンテンツ
{% endif %}

上記と反対に、 hoge のページ以外で表示したい場合は次のようになりますね。

{% if page.handle != 'hoge' %}
// hoge のページ以外で表示するコンテンツ
{% endif %}

なお、handle に特定の文字が含まれているかどうかは、下記のような記述の方法もあるようです。

{% if handle contains 'hide-from-search' %}
  <meta name="robots" content="noindex">
{% endif %}

こちらなら、URL ハンドルの命名によっては、複数のページを条件分岐でコントロールすることができそうです。

Shopify（ショッピファイ）の言語 Liquid でよく利用するテンプレートタグについては、下記のトピックにまとめています。