Liquid テンプレートタグ

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

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

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

Google Analytics のトラッキング解析データに、自分からのアクセスを含めないといった場合にも条件分岐が活躍しますよね。

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

Shopify 商品ページの条件分岐

商品画像が複数ある場合の条件分岐

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

商品バリエーションの有無による条件分岐

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

商品タイプ(カテゴリー)別の条件分岐

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

Shopify ページの条件分岐

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

参考 The page object

ページのオブジェクトはいくつかありますが、 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 でよく利用するテンプレートタグについては、下記のトピックにまとめています。

Shopify(ショッピファイ)でよく使う Liquid のテンプレートタグまとめ
Shopify(ショッピファイ)のテンプレート言語『Liquid』で、よく使うけど忘れてしまいがちな構文タグをまとめています。 公式リファレンスおよび各チートシートはブックマーク必須です。 公式リファレンス Liquid tem...
タイトルとURLをコピーしました