アウトプットとロジック

HTMLにアウトプットするものには {{ }}
ifやfor、変数宣言などのロジックには{% %}を使用する。

商品ページを構成するliquidファイルからコードの一部分を抜粋した。
コード内の product は呼び出す商品ページによって動的に変化する。

{% for image in product.images %}
  <img src="{{ image | img_url: ‘100x100’ }}">
{% endfor %}

Liquidでは、上記のようにhtml内にliquidコードを埋め込む事ができる。
このコードを分解していくと、forループ部分(ロジック)とimgタグ部分(アウトプット)に分かれる。

{% for image in product.images %}

{% endfor %}

ロジック

↑その商品の持つ商品画像の数だけ繰り返すforループ。

<img src="{{ image | img_url: ‘100x100’ }}">

アウトプット

↑imgタグのsrc属性にliquidのアウトプットタグが代入されている。
image_urlフィルターが変数imageを受け取り、100×100のサイズバージョンの
商品画像のURLをsrc属性に割当て、imgタグで表示させている。