Liquidとは
Liquidの3要素（出力・タグ・フィルタ）を見分け、テーマのコードを読み始められる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、Liquid（Shopifyのテーマで使うテンプレート言語）の3つの記法を見分けられるようになります。
受託では、この3つが読めれば、どんなテーマの改修でもコードを追い始められます。
Liquidの記法は3つだけ
{{ }}は値を出力します。{% %}はロジック（条件・くり返し・変数）で、それ自体は何も出力しません。|はフィルタで、左の値を加工して右へ渡します。
テーマのファイルは、この3つとHTMLの混在でできています。
Liquidはどこで動くのか
ShopifyのサーバーがHTMLを作る段階で、1回だけ実行されます。
ブラウザでは動かず、ユーザーの操作には反応しません。
エラーが出ても画面は止まらず、「Liquid error」という文字が出ます。
クリック後の変化はJavaScriptの仕事です。
コードを読む順序
まず{{ }}を探して「何が表示されるか」をつかみます。
次に{% %}で「どんな条件で」を追います。
フィルタは最後に見ます。
この順で読むと、長いファイルでも目が滑りません。
発展：関数が無いことと、空白の制御
Liquidでは自分で関数を定義できません。
再利用はスニペット（renderで呼び出す部品のファイル）とフィルタの組み合わせで行います。
JavaScriptの感覚でfunctionを書こうとしてつまずくところです。
また、{%- -%}や{{- -}}のようにダッシュを付けると、前後の改行と空白が削られます。
HTMLに余分な空白が出るのを防ぐための書き方です。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。