Liquidとは

Liquidとは、Shopifyが2006年に作ったオープンソースのテンプレート言語です。
アウトプット、ロジック、ループといったコンセプトがあり、変数（データ）を扱います。
ユーザー情報や商品情報など、ショップの動的なデータはLiquidの変数に格納されているため、Liquidを利用して表示の切り替えなどを行います。
今回は、Liquidの基本的な使い方と、実際の使用例を紹介したいと思います。

基本の使い方

出力

データの出力は、二重中括弧{{}}で囲います。

Hello {{name}}
Hello {{user.name}}
Hello {{ 'tobi' }}

よく使うタグ

comment

コメントアウトしたい箇所を、{% comment %} 〜 {% endcomment %}で囲います。

{% comment %}
  コメントアウト
{% endcomment %}

assign

変数に値を割り当て。
先ほどの出力タグを使用することで、代入した値を出力できます。

{% assign name = '田中' %}
{{ name }}

# 「田中」が出力される

if

条件がtrueの場合に実行。

{% if user != null %}
  こんにちは {{ user.name }}さん
{% endif %}

elseやelsifを使った条件も可能。

{% if user.name == '田中' %}
  こんにちは　田中さん
{% elseif user.name == '鈴木' %}
  こんにちは　鈴木さん
{% else %}
  こんにちは みなさん
{% endif %}

unless

if文の逆の意味。if文の演算子で!=を書いた時と同じ意味になります。

{% unless product.title == 'テストページ' %}
  こちらはテストページではありません
{% endunless %}

case

ケース別の条件分岐。if文と似てますが、単純で数の多い条件に適してます。

{% case template %}
{% when 'label' %}
     このテンプレートは、ラベルです。
{% when 'product' %}
     このテンプレートは、プロダクトです。
{% else %}
     それ以外のテンプレート
{% endcase %}

for

arrayに入っている全てのアイテムを表示します。

{% for item in array %}
  {{ item }}
{% endfor %}

フィルター

フィルターを使うことで、{{}}内の出力結果を変更することができます。
パイプ|で繋げて記述することで、フィルターを呼び出すことができます。

{{ 'foo' | append:'bar' }}
# foobar

{{ 4.6 | ceil }} 
# 5

ケース別使用例

販売価格をURL毎に切り替えたい

1つのテンプレートで、商品の販売価格を複数設定する場合、URL毎にルールを決めて設定します。例えば2,980円の時は、URLに「2980」、2個まとめて2,980円で販売したい時は「2980_2SET」。URLの文字列を取得し、販売価格の表示をURL毎に出し分けます。

{% if order.url.base_url contains '2980' %}
    この商品は、2,980円です。
{% endif order.url.base_url contains '1980' %}
    この商品は、1,980円です。
{% endif order.url.base_url contains '2980_2SET' %}
    この商品は、2個で2,980円です。
{% else %}
    この商品は、通常価格3,980円です。
{% endif %}

クーポンコードを入力したユーザーに、コードに応じた割引をしたい

クーポンコードの入力アクションで真偽値を取得し、割引額の表示を出し分けます。
クーポンコード入力後の動作になるため、クーポンに関する変数は、アップセルやサンクスアップセルではないと利用できません。

{% assign coupon_flg = false %}
{% if order.coupon.name contains 'クーポン' %}
    {% assign coupon_flg = true %}
{% endif %}
{% if order.coupon.code contains '500' %}
    {% assign discount = '500' %}
{% elsif order.coupon.code contains '300' %}
    {% assign discount = '300' %}
{% elsif order.coupon.code contains '1000' %}
    {% assign discount = '1000' %}
{% endif %}

<p>この商品は、2,980円{% if coupon_flg %}の{{ discount }}円引き{% endif %}です。</p>

通常LPで購入した商品によって、表示を切り替えたい

通常LPで購入した商品によって、アップセル商品を切り替えたい場合に使用します。
仕様上、完全一致での条件分岐はできないため、演算子はcontainを使用します。

{% assign order_item_name = order.order_items | map: 'variant' | map: 'name' | join: ', ' %}
{% if order_item_name contains '単品' %}
    2個おまとめ買いで、1,000円OFF！2,980円！
{% endif %}
{% if order_item_name contains '2個' %}
    3個おまとめ買いで、1,500円OFF！3,500円！
{% endif %}
{% if order_item_name contains '3個' %}
    4個おまとめ買いで、2,000円OFF！3,980円！
{% endif %}

さいごに

基本の構文の使い方と、どの変数に何のデータが入っているかを理解していれば、いろいろ加工できそうです。

ドキュメント
https://shopify.github.io/liquid/

初学者のためのLiquid講座