Liquidの基本的な書き方について

LiquidをHTMLに埋め込む方法は、次の2種類があります。

・ {{ 〇〇 }} ：変数を埋め込み、サイト上に出力するために使用される
・ {% 〇〇 %} ：条件分け・繰り返し・変数の定義などに使用される

この2つを説明する前に、Liquidの"オブジェクト"、"フィルタ"、"タグ"について説明します。

Liquidのオブジェクトについて
Liquidのオブジェクトは、Shopifyの管理画面からデータを出力するために使用します。

Liquidのフィルタについて
Liquidのフィルタは、出力形式を変更するために使用します。

Liquidのタグについて
Liquidのタグは、ロジックと制御フローを作成するために用いられ、 {% 〇〇 %} の中に記述されます。
タグは全部で
1 「流れを制御するタグ(Control flow tags)」
2 「繰り返しタグ(Iteration tags)」
3 「変数タグ(Variable tags)」
4 「その他のタグ(Theme tags)」
の4種類あります。

{{ 〇〇 }}について

{{ 〇〇 }}は、変数の値を表示するのに使用されます。

{{ "オブジェクト"."属性" }}
のように記載します。

例えば

{{product.title}}

の場合は、商品名が出力されます。
このproductは、そのページで読み込んでいる商品となります。

{% 〇〇 %}について

{{ 〇〇 }}は条件分け(例：if)・繰り返し(例：for)・変数の定義(例：assign)などに使用されます。

それぞれ例文を挙げていきます。

if文

{% if myName == 'KOSUKE' %}
<!-- 名前がKOSUKEと一致する場合 -->

<p>わたしの名前はKOSUKEです</p>

{% endif %}

名前が KOSUKE の場合、文章が表示されます。

for文

{% for product in collection.products %}

{{ product.title }}

{% endfor %}

collection.productsの数だけ繰り返して商品タイトルを出力します。

変数の定義

{% assign myName = 'KOSUKE' %}

変数「myName」に対して、文字列「KOSUKE」を定義します。

今後はもっと長いコードを書いて解説していきます！