Shopify Liquid タグ一覧｜if・for・assign・capture・liquid の使い方

条件が真のときだけ中身を出力します。

書き方

{% if 条件 %} 〜 {% endif %}

必ず endif で閉じます。かっこによる条件のまとめや三項演算子（a ? b : c の書き方）は使えません。

例

{% if product.available %}
  <button>カートに追加</button>
{% else %}
  <p>売り切れ</p>
{% endif %}

出力

<button>カートに追加</button>

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

最初の条件に当てはまらなかったときの、次の条件やそれ以外の処理を書きます。

書き方

{% if A %} 〜 {% elsif B %} 〜 {% else %} 〜 {% endif %}

elseif ではなく elsif と綴ります。上から順に評価され、最初に当てはまった1つだけが実行されます。

例

{% if cart.item_count == 0 %}
  カートは空です
{% elsif cart.item_count == 1 %}
  1点入っています
{% else %}
  複数入っています
{% endif %}

出力

1点入っています

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

1つの変数の値に応じて処理を切り替えます。

書き方

{% case 変数 %}{% when 値 %} 〜 {% endcase %}

値ごとに if を並べるより読みやすくなります。when にはカンマ区切りで複数の値を書けます。

例

{% case product.type %}
  {% when 'Tシャツ', 'パーカー' %}
    トップス
  {% when 'パンツ' %}
    ボトムス
  {% else %}
    その他
{% endcase %}

出力

トップス

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

条件が偽のときだけ中身を出力します（if の逆）。

書き方

{% unless 条件 %} 〜 {% endunless %}

「〜でなければ」を書くときに使います。else も使えますが、複雑になる場合は if に書き直した方が読みやすくなります。

例

{% unless customer %}
  <a href="{{ routes.account_login_url }}">ログイン</a>
{% endunless %}

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

配列の要素を1つずつ取り出して繰り返し処理します。

書き方

{% for 要素 in 配列 %} 〜 {% endfor %}

limit: と offset: で件数と開始位置、reversed で逆順を指定できます。1回のループは最大50件までなので、それ以上は paginate タグを使います。

例

<ul>
{% for product in collection.products limit: 3 %}
  <li>{{ forloop.index }}. {{ product.title }}</li>
{% endfor %}
</ul>

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

配列が空でループが1回も回らないときの表示を書けます。

書き方

{% for x in 配列 %} 〜 {% else %} 〜 {% endfor %}

「該当商品がありません」のような空の状態の表示を、別の if を書かずに済ませられます。

例

{% for article in blog.articles %}
  {{ article.title }}
{% else %}
  記事はまだありません
{% endfor %}

出力

記事はまだありません

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

ループをその場で終了します。

書き方

{% break %}

目的の要素が見つかった時点で抜けたいときに使います。

例

{% for variant in product.variants %}
  {% if variant.available %}
    最初の在庫あり: {{ variant.title }}
    {% break %}
  {% endif %}
{% endfor %}

出力

最初の在庫あり: M / ブラック

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

今回の繰り返しをスキップして、次の要素へ進みます。

書き方

{% continue %}

特定の条件の要素だけ表示しないときに使います。

例

{% for product in collection.products %}
  {% if product.tags contains '非表示' %}{% continue %}{% endif %}
  {{ product.title }}
{% endfor %}

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

ループのたびに、指定した値を順番に入れ替えて出力します。

書き方

{% cycle '値1', '値2' %}

1行おきにクラス名を変える、といった用途に使います。同じページで複数使う場合はグループ名を付けて区別します。

例

{% for item in cart.items %}
  <tr class="{% cycle 'odd', 'even' %}">...</tr>
{% endfor %}

出力

<tr class="odd">...</tr><tr class="even">...</tr>

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

配列の要素を HTML の表（table）の行と列に並べて出力します。

書き方

{% tablerow x in 配列 cols: 3 %} 〜 {% endtablerow %}

<tr> と <td> を自動で作ります。外側の <table> は自分で書く必要があります。今は CSS グリッドで並べるのが一般的です。

例

<table>
{% tablerow product in collection.products cols: 2 limit: 4 %}
  {{ product.title }}
{% endtablerow %}
</table>

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

商品や記事などの長い一覧をページに分けて表示します。

書き方

{% paginate 配列 by 件数 %} 〜 {% endpaginate %}

for の50件制限を超えて全件を扱うときに必須です。ページ送りのリンクは paginate オブジェクトや default_pagination フィルターで出します。1ページは最大250件です。

例

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}

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

名前を付けて値を保存し、あとで使えるようにします。

書き方

{% assign 変数名 = 値 %}

フィルターを付けた結果も保存できます。同じ名前で assign し直すと上書きされます。

例

{% assign sale_items = collection.products | where: 'available', true %}
{{ sale_items.size }}件

出力

12件

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

囲んだ部分の出力結果を、文字列として変数に保存します。

書き方

{% capture 変数名 %} 〜 {% endcapture %}

複数の値やHTMLを組み合わせた長い文字列を作るときに便利です。

例

{% capture share_text %}{{ product.title }}｜{{ shop.name }}{% endcapture %}
{{ share_text | url_encode }}

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

数値を出力してから1増やします（0から始まります）。

書き方

{% increment 変数名 %}

assign や capture で作った同名の変数とは別物として扱われます。連番の id を振るなど限られた用途で使います。

例

{% increment counter %}
{% increment counter %}

出力

0
1

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

数値を1減らしてから出力します（-1から始まります）。

書き方

{% decrement 変数名 %}

increment と同じく assign の変数とは独立しています。使う場面は多くありません。

例

{% decrement stock %}
{% decrement stock %}

出力

-1
-2

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

囲んだ部分をコメントとして扱い、出力も実行もしません。

書き方

{% comment %} 〜 {% endcomment %}

一時的にコードを無効化するときにも使えます。HTML の <!-- --> と違い、ページのソースにも残りません。

例

{% comment %}
  セール終了後に削除する
{% endcomment %}

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

1行だけのコメントを書く短い書き方です。

書き方

{% # コメント %}

liquid タグの中では行頭に # を書くだけでコメントにできます。

例

{% # 送料無料の金額は5,000円 %}
{% assign free_shipping = 500000 %}

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

{{ }} と同じように値を出力します。主に liquid タグの中で使います。

書き方

{% liquid echo 値 %}

liquid タグの中では {{ }} が使えないため、出力したいときは echo を書きます。フィルターも付けられます。

例

{% liquid
  assign price = product.price | money
  echo price
%}

出力

¥3,300

公式ドキュメント　｜　関連TIPS：Shopifyで{% liquid 〜 %}内の変数を表示させたい場合は “echo” を使用　｜　目次へ戻る ↑

複数のタグを、{% %} を毎回書かずにまとめて書けるようにします。

書き方

{% liquid 処理を改行区切りで書く %}

1行に1つのタグを書きます。ロジックが長いスニペットの見通しが良くなります。

例

{% liquid
  if product.available
    assign label = '在庫あり'
  else
    assign label = '売り切れ'
  endif
  echo label
%}

出力

在庫あり

公式ドキュメント　｜　関連TIPS：Shopifyで{% liquid 〜 %}内の変数を表示させたい場合は “echo” を使用　｜　目次へ戻る ↑

囲んだ部分の Liquid を処理せず、そのまま文字として出力します。

書き方

{% raw %} 〜 {% endraw %}

記事内で Liquid のコードを紹介するときや、同じ {{ }} 記法を使う JavaScript のテンプレートと共存させるときに使います。

例

{% raw %}{{ product.title }}{% endraw %}

出力

{{ product.title }}

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

スニペットやブロックの説明・受け取る引数を書くための注釈（LiquidDoc）です。

書き方

{% doc %} @param ... {% enddoc %}

出力はされません。エディタの入力補完やテーマチェックが使う情報になり、Horizon 世代のテーマではスニペットの先頭に書くのが推奨です。

例

{% doc %}
  価格ラベルを表示する
  @param {product} product - 対象の商品
  @param {boolean} [show_compare] - 通常価格も出すか
{% enddoc %}

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