今回は、Liquidで変数を宣言する方法をご紹介します。
Liquidには2種類の宣言方法があるので、使用する場所によって使い分けができるといいかと思います。

変数宣言 assignの使い方

変数宣言は、Liquidの{%%}タグの中で行います。

{% assign favorite_sweets = 'チョコレートケーキ' %}

<p>{{ favorite_sweets }}</p> //表示結果：チョコレートケーキ

今回は、favorite_sweetsという変数に「チョコレートケーキ」という文字列を代入しています。
基本的な書き方としては、assignに続いて変数名を記述し、イコールで繋いで初期値を代入します。
値には、様々なデータ型の挿入が可能です。

また、{{}}で変数を囲むことで画面上に表示することができます。

assignでの変数宣言の例

{% assign sweets = 'チョコレートケーキ' %}
{% assign number = 5 %}
{% assign boolean = true %}

assignの内容を変更したい時

変数に代入した値を変更したい場合も、改めてassignで記述する必要があります。

{% assign favorite_sweets = 'チョコレートケーキ' %}
{{ favorite_sweets }} //表示結果：チョコレートケーキ

//favorite_sweetsの値を変更
{% assign favorite_sweets = 'モンブラン' %}
{{ favorite_sweets }} //表示結果：モンブラン

上記のように同じ変数名を定義しても、エラーは表示されません。
今回は意図的に変数の上書きを行なっているので問題ありませんが、変数名の意図しない重複には注意が必要です。

変数宣言 captureの使い方

こちらも、assign同様{%%}の中で変数宣言を行います。
assignと異なるのは、captureには閉じタグが必要という点です。

{% capture limited %}
 このチョコレートは期間限定商品です。
{% endcapture %}

<p>{{ limited }}</p> //表示結果：このチョコレートは期間限定商品です。

今回は、limitedという変数に「このチョコレートは期間限定商品です。」という文字列を代入しています。
基本的な書き方は、{% capture 変数名 %}の記述の後ろに任意の記述を行い、最後に{% endcapture %}で閉じます。

assignとcaptureの違い

ここまでの例では、同じように文字列を代入しただけなので、違いが分かりづらかったかもしれません。

assignとcaptureの大きな違いは、captureではHTMLやLiquidのコードなども変数に代入できるという点です。
assignはシンプルに文字列や数値などを代入するのに対して、captureでは以下のような変数を作成することもできます。

{% capture shipping %}
  {% for tag in product.tags %}
    {% if tag == 'icecream' %}
      <p>こちらの商品はクール便でお届けいたします。</p>
    {% else %}
      <p>こちらの商品は通常配送です。</p>
    {% endif %}
  {% endfor %}
{% endcapture %}

shippingという変数にif文で条件分岐をした内容を代入しました。
こちらを商品ページに表示してみます。

{{ shipping }}

たったこれだけのコードで、タグにicecreamがついている商品の商品ページで「こちらの商品はクール便でお届けいたします。」と表示され、その他の商品のページでは「こちらの商品は通常配送です。」と表示されます。

また、assignとcaptureを組み合わせて使用することも可能です。

{% assign open = 7 %}
{% assign close = 23 %}

{% capture business_hours %}
<p>営業時間は{{ open }}時から{{ close }}時です。</p>
{% endcapture %}

{{ business_hours }} //表示結果：営業時間は7時から23時です。

オブジェクトも代入できます

captureはもちろん、assignにもオブジェクトが代入できます。

{% assign title = product.title %}

例えば、管理画面で動的にコレクションが選択できるコレクションリストセクションを作成した際には、以下のようにcollectionタグに代入しておくと便利です。

{% assign collection = section.settings.collection %}

コレクション名とコレクションに登録されている商品数を表示してみましょう。

//変数に代入しない場合
{{ section.settings.collection.title }}
{{ section.settings.collection.products_count }}

//変数に代入した場合
{{ collection.title }}
{{ collection.products_count }}

上記のように変数に代入した場合の方がコードがスッキリとしていて分かりやすくなります。
これだけでは分かりづらいかと思いますが、実際にセクションをカスタマイズする際にはもっと記述が増えて便利さを実感できるかと思います。

まとめ

変数に代入することで、コードの見通しも良くなる上に再利用もしやすいので是非利用してみてください。