Shopifyのテーマを構築する上で覚えておかなければいけないこととして、大きく「Object」、「Tag」、「filter」という概念があります。
今回はその中から「Tag」について、公式ページを参考にまとめてみました。
LiquidのTagとは？
{% if product.title == ” %}など、{% %}で囲んで記述する条件分岐や繰り返しの記述のことです。
基本的にはphpなどと同じようにif文（条件分岐）やfor文（繰り返し）などがあります。
Control flow tags（条件分岐）
if
{% if product.title == 'テスト商品' %}
<p>この商品はテスト商品です</p>
{% endif %}まずは基本のif文から。この例なら「もし 商品のタイトルが テスト商品 とイコールだったら」という意味ですね。
特定のタグが入っていたらラベルを表示したりする時に使用します。
unless
{% unless product.title == 'テスト商品' %}
<p>この商品はテスト商品ではありません</p>
{% endunless %}「もし 商品のタイトルが テスト商品 とイコールじゃなかったら」という意味になります。
if文で!=（もしxxじゃなかったら）と書いた場合と同じです。
else / elsif
{% if product.title == 'テスト商品' %}
この商品はテスト商品です
{% elsif product.title == '予約商品' %}
この商品は予約商品です
{% else %}
この商品は普通の商品です
{% endif %}if文に続けて別の条件を指定する場合は、else/elsifを使います。
case / when
{% case product.title %}
{% when 'テスト商品' %}
<p>この商品はテスト商品です</p>
{% when '予約商品' %}
<p>この商品は予約商品です</p>
{% when '限定商品' %}
<p>この商品は限定商品です</p>
{% else %}
この商品は普通の商品です
{% endcase %}「xxの値がyyの時は・・、zzの時は・・」という指定ができます。if文と似たような動きですが、if文が細かい条件指定に適しているのに対し、case / whenは上記のように単純で数の多い条件を指定する際に使用します。
Multiple conditions (and / or)
{% if product.title == '限定商品' or '予約商品' %}
<p>この商品は限定商品または予約商品です。</p>
{% endif %}if文に複数の条件を指定することも可能です。（and / or）
orがどちらかに合致した場合、andが両方に合致した場合の指定になります。
Iteration tags（繰り返し）
for
{% for product in collection.bag %}
{{ product.title }}
{% endfor %}基本のfor文（繰り返し）です。ハンドルがbagのコレクションにある商品のタイトルを全て表示します。
else
{% for product in collection.products %}
{{ product.title }}
{% else %}
<p>このコレクションに商品はありません</p>
{% endfor %}for文で条件に当て嵌まるものがなかった場合の記述はelseで行います。
break
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}繰り返しの途中で特定の値に遭遇した時、そのループを中断するにはbreakという記述を追加します。
上記の例の場合、1-5までの数字を繰り返し出力していますが、4に当たった時にbreakが入っているので、1、2、3の数字が出力されます。
continue
{% continue %}breakは中断、continueはスキップです。breakの例でcontinueと指定をすれば、4を除く１、2、3、5の値が出力されます。
for tag parameters（for文で使えるパラメータ）
limit
{% for product in collection.bag limit:2 %}limitを使うことで、for文で出力する値の数を制限することができます。
offset
{% for product in collection.bag offset:2 %}最初からxx個を除く値を出力します。（3番目の項目から表示）
range(in)
{% for i in (3..5) %}出力する値の範囲を指定することもできます。
reversed
{% for item in array reversed %}後ろから順番に表示をさせることもできます。
その他の繰り返し処理
for文以外にもcycleという予め指定した処理を繰り返すもの、tablerowというtableタグを生成するための記述があります。
cycle
{% cycle '1', '2', '3' %}このように予め値を指定しておき、for文と組み合わせて、1番目の要素にはxx、2番目の要素にはyy・・といった値を追加したりすることができる記述です。
詳細は公式ページの例を参照してください。
https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags#cycle
tablerow
<table>
{% tablerow product in collection.products %}
{{ product.title }}
{% endtablerow %}
</table>などと記述すると、商品名が入ったテーブルを生成してくれる便利な記述です。
こちらも詳細は公式ページの例を参照してください。
https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags#tablerow
Theme tags（テーマタグ）
comment
{% comment %}コメント{% endcomment %}コメントファイル内にコメントを記述します。コメント扱いにしたい部分の前後をcommentで囲います。HTMLやCSSのコメントアウトと同じ使い方です。
echo
echo product.featured_image | img_tag後述する{% liquid %}タグの中に記述することで、上記ならimgのHTMLを出力することができます。
form
{% form 'contact' %}
...
{% endform %}お問い合わせの送信やアカウント登録など、ストアの特定のページで使用するためのformタグを出力します。
contact以外でよく使うものだと’customer’や’product’などがあります。
詳細は公式ページを参照してください。
https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags#form
layout
{% layout 'mobile' %}テーマのlayoutディレクトリにあるファイルを読み込むための記述です。
liquid
前述のechoタグなどと一緒に使用しますが、現時点で使用頻度はあまり高くない印象です。
詳細は公式ページを参照してください。
https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags#liquid
paginate
{% paginate collection.products by 5 %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{% endpaginate %}これはよく使いますね。ページネーションを作るためのタグです。「by~」で1ページ辺りに表示する商品や記事の数を指定します。
raw
{% raw %}{{ product.title }}{% endraw %}ストア上で{{ product.title }}をそのまま{{ product.title }}と表示するためのタグです。
WordPressで記事を書く時に使用するpreやcodeタグのようなものですね。
render
{% render 'snippet-name' %}これも頻出します。テーマのsnippetディレクトリにあるファイルを読み込むための記述です。
section
{% section 'header' %}こちらはテーマのsectionディレクトリからファイルを読み込むための記述です。
style
{% style %}
.header{
background: red;
}
{% endstyle %}Liquidファイルの中でスタイルタグを出力します。
Variable tags（変数）
assign
{% assign favorite_store = '新宿店' %}一番シンプルな記述で、favorite_storeに’新宿店’という文字列を入れています。
出力は{{ }}で囲み、{{ limited_products }}のような形で行います。
capture
{% assign favorite_store = '新宿店' %}
{% assign age = 29 %}
{% capture profile %}
年齢：{{ age }}
お気に入り店舗：{{ favorite_store }}
{% endcapture %}assignと一緒に使ったり、より複雑な値を入れておいたりすることができるのがcaptureです。
上記の例の場合、{{ profile }}と記述するだけで、年齢とお気に入り店舗を出力することができます。
increment / decrement
<ul>
<li class="product-{% increment counter %}">商品1</li>
<li class="product-{% increment counter %}">商品2</li>
<li class="product-{% increment counter %}">商品3</li>
<li class="product-{% increment counter %}">商品4</li>
</ul>incrementは、登場した回数分だけ数字を振ることのできるタグです。上記を出力すると、以下のようになります。
<ul>
<li class="product-0">商品1</li>
<li class="product-1">商品2</li>
<li class="product-2">商品3</li>
<li class="product-3">商品4</li>
</ul>nth-childなどでCSSは調整できるのでそこまで登場頻度は高くないとは思いますが、出てきた時に戸惑わないように覚えておくと良いと思います。数字が0からはじまる点に注意です。
decrementは-1、-2、-3とマイナス方向に数字を振っていきます。
Deprecated tags（非推奨のタグ）
include
{% include 'snippet-name' %}includeはrenderと同様、テーマのsnippetsディレクトリにあるファイルを読み込むための記述です。
なぜ”Deprecated（=非推奨）”なのかというと、renderと違って、親のテンプレートにある変数をincludeされたファイルによって上書きしてしまうから・・という説明があります。
Liquidのタグまとめ
なんだか自分の勉強が半分みたいな記事になってしまいましたが、一覧にしてみると誤解したまま使っていた項目もあり、良い勉強になりました。
改めて思うのは、Shopifyのテーマ構築を勉強するなら、公式ページのドキュメントを読むのが一番の近道ですね。本当に詳しく説明されているので、感謝しかないです・・！
