Shopify Liquidの書き方入門｜{{ }}と{% %}・演算子・データ型・空白制御

{{ }} は値を画面に出す記号、{% %} は条件分岐や繰り返しなどの処理を書く記号です。

書き方

{{ 出力 }} / {% 処理 %}

{% %} の中身は画面に出ません。値を出したいときは {{ }} を使うか、liquid タグ内なら echo を使います。

例

{% assign name = shop.name %}
{{ name }}へようこそ

出力

STORE DOJOへようこそ

公式ドキュメント　｜　目次へ戻る ↑

値の後ろに | を付けてフィルターをつなぐと、値を加工して出力できます。

書き方

{{ 値 | フィルター: 引数 }}

フィルターは左から順に適用されます。引数（追加の指定）はコロン : の後ろに書き、複数ならカンマで区切ります。

例

{{ product.title | upcase | truncate: 10 }}

公式ドキュメント　｜　目次へ戻る ↑

記号の内側にハイフンを付けると、その前後の空白や改行を取り除きます。

書き方

{%- 処理 -%} / {{- 出力 -}}

HTML の属性値やJSONを組み立てるときに、余計な改行が入るのを防げます。表示上の差が無い場合は付けなくても動作は同じです。

例

<span>
  {%- if product.available -%}
    在庫あり
  {%- endif -%}
</span>

出力

<span>在庫あり</span>

公式ドキュメント　｜　関連TIPS：ShopifyのLiquidの {% %} と {%- -%} の違い　｜　目次へ戻る ↑

if で値そのものを書いたとき、false と nil だけが偽、それ以外はすべて真として扱われます。

書き方

{% if 値 %}

空の文字列 '' や 0 も真になる点が他の言語と違います。空かどうかは == empty や == blank 、 size > 0 で確かめます。

例

{% assign note = '' %}
{% if note != blank %}メモあり{% else %}メモなし{% endif %}

出力

メモなし

公式ドキュメント　｜　目次へ戻る ↑

商品やコレクションなどを特定するための、URLにも使われる英数字の名前です。

書き方

collections['handle'] / product.handle

タイトルから自動で作られ、重複すると末尾に -1 などが付きます。日本語タイトルの商品は管理画面で英数字のハンドルを付けておくと Liquid から参照しやすくなります。

例

<a href="{{ collections['new-arrivals'].url }}">新着一覧</a>

出力

<a href="/en-us/collections/new-arrivals">新着一覧</a>

公式ドキュメント　｜　目次へ戻る ↑

左右の値が等しいかを比べます。

書き方

{% if a == b %}

文字列と数値は別物として扱われるため、'1' と 1 は等しくなりません。比べる前に型（値の種類）をそろえるのが安全です。

例

{% if product.vendor == 'STORE DOJO' %}
  <span>公式アイテム</span>
{% endif %}

出力

<span>公式アイテム</span>

公式ドキュメント　｜　関連TIPS：ShopifyのLiquidで文字列と数字の値を評価するときは型を揃える必要がある点に注意　｜　目次へ戻る ↑

左右の値が等しくないかを比べます。

書き方

{% if a != b %}

「〜以外なら」という条件を書きたいときに使います。unless タグで書き換えられることもあります。

例

{% if template.name != 'index' %}
  <a href="{{ routes.root_url }}">トップへ戻る</a>
{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

左が右より大きいかを比べます。

書き方

{% if a > b %}

数値どうしで使います。設定値など文字列で届く値は | plus: 0 などで数値に変換してから比べます。

例

{% if cart.item_count > 0 %}
  カートに{{ cart.item_count }}点あります
{% endif %}

出力

カートに2点あります

公式ドキュメント　｜　目次へ戻る ↑

左が右より小さいかを比べます。

書き方

{% if a < b %}

在庫数が少ないときの表示など、しきい値（境目の値）を使う条件でよく使います。

例

{% if variant.inventory_quantity < 5 %}
  残りわずか
{% endif %}

出力

残りわずか

公式ドキュメント　｜　目次へ戻る ↑

左が右以上かを比べます。

書き方

{% if a >= b %}

境目の値も含めたいときは > ではなく >= を使います。

例

{% if cart.total_price >= 500000 %}
  送料無料の対象です
{% endif %}

出力

送料無料の対象です

公式ドキュメント　｜　目次へ戻る ↑

左が右以下かを比べます。

書き方

{% if a <= b %}

金額は「最小単位（円なら1円×100）」の整数で入っている点に注意します。

例

{% if product.price <= 100000 %}
  1,000円以下
{% endif %}

出力

1,000円以下

公式ドキュメント　｜　目次へ戻る ↑

どちらか一方でも真なら全体を真とします。

書き方

{% if a or b %}

Liquid ではかっこ () で条件をまとめられません。複雑な条件は if を入れ子にするか、先に assign で結果を変数にします。

例

{% if customer.tags contains 'VIP' or customer.orders_count > 10 %}
  特別会員
{% endif %}

出力

特別会員

公式ドキュメント　｜　目次へ戻る ↑

両方とも真のときだけ全体を真とします。

書き方

{% if a and b %}

and と or を混ぜると右側から順に評価されます。意図どおりに動くか不安なときは if を分けて書きます。

例

{% if product.available and product.compare_at_price > product.price %}
  セール中
{% endif %}

出力

セール中

公式ドキュメント　｜　目次へ戻る ↑

文字列に特定の語が含まれるか、または文字列の配列にその要素があるかを調べます。

書き方

{% if 文字列 contains '語' %}

文字列専用で、オブジェクトの配列（商品の一覧など）には使えません。タグの部分一致に注意が必要です（'SALE' は 'PRESALE' にも一致します）。

例

{% if product.tags contains '新商品' %}
  <span class="badge">NEW</span>
{% endif %}

出力

<span class="badge">NEW</span>

公式ドキュメント　｜　関連TIPS：【Dawn】Shopifyで商品やブログに設定したタグについて「タグの完全一致」と「タグの部分一致」を判定するコード例　｜　目次へ戻る ↑

文字の並びを表す型です。

書き方

{% assign label = 'セール' %}

シングルクォート ' でもダブルクォート " でも囲めます。数値に見えても引用符で囲めば文字列です。

例

{% assign message = '本日発送' %}
{{ message }}

出力

本日発送

公式ドキュメント　｜　関連TIPS：ShopifyのLiquidで文字列と数字の値を評価するときは型を揃える必要がある点に注意　｜　目次へ戻る ↑

整数と小数を表す型です。

書き方

{% assign qty = 3 %}

引用符で囲まずに書きます。10 / 3 のような整数どうしの計算は小数点以下が切り捨てられます。

例

{% assign tax_rate = 0.1 %}
{{ 1000 | times: tax_rate }}

出力

100.0

公式ドキュメント　｜　関連TIPS：ShopifyのLiquidで文字列と数字の値を評価するときは型を揃える必要がある点に注意　｜　目次へ戻る ↑

true（真）か false（偽）のどちらかを表す型です。

書き方

{% assign show = true %}

チェックボックス型のテーマ設定は真偽値で届きます。

例

{% if section.settings.show_vendor %}
  {{ product.vendor }}
{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

値が存在しないことを表す特別な値です。

書き方

{% if 変数 == nil %}

存在しないプロパティを参照すると nil になり、出力しても何も表示されません。if では偽として扱われます。

例

{% if product.metafields.custom.note == nil %}
  補足はありません
{% endif %}

出力

補足はありません

公式ドキュメント　｜　目次へ戻る ↑

複数の値を順番に並べたまとまりです。

書き方

{% for x in 配列 %}

Liquid だけで配列を直接書くことはできないため、split フィルターで文字列から作るのが定番です。[0] のように番号で要素を取り出せます。

例

{% assign sizes = 'S,M,L' | split: ',' %}
{{ sizes[1] }}

出力

M

公式ドキュメント　｜　目次へ戻る ↑

文字列・配列・オブジェクトが空かどうかを確かめるための特別な値です。

書き方

{% if 値 == empty %}

存在しないオブジェクト（例: 削除されたコレクション）にアクセスしたときに返る EmptyDrop の判定にも使えます。

例

{% unless collections['sale'] == empty %}
  <a href="{{ collections['sale'].url }}">セール会場</a>
{% endunless %}

公式ドキュメント　｜　目次へ戻る ↑