07-03
変数：assign・capture・liquidタグ
変数に値を保存し、複数行のHTMLや複雑な条件を読みやすく組み立てられる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、変数（値に名前を付けて保存する箱）を使い、HTMLや条件を読みやすく組み立てられるようになります。
受託では、Horizon系のテーマに多い{% liquid %}の書き方が読めないと、いまのテーマを改修できません。
assignとcaptureの違いとは
assignは1行で値を保存します。
フィルタの結果も保存できます: {% assign title = product.title | upcase %}。captureはブロックの中の出力を丸ごと文字列として保存します。
クラス名の組み立てや、条件で変わるHTMLの断片を先に作るのに使います。
使い分けは、単一の値ならassign、複数行の出力ならcaptureです。
{% liquid %}とは
複数行のロジックを、タグ記号なしで書けるブロックです。
1行に1文ずつ書き、{{ }}の代わりにechoで出力します。
Horizon系のテーマはこの書き方が多いです。
条件が3つ以上絡むときは、{% liquid %}にまとめると読みやすくなります。
コメントはどう書くか
1行なら{% # 一行 %}、複数行なら{% comment %}...{% endcomment %}です。{% liquid %}の中では#で始めます。
コメントは出力に出ないので、設計のメモを残せます。
公式ドキュメント
ステップ1 / 2
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。