Liquidテンプレートがテーマ開発の中核である理由と処理フロー
Shopifyのテーマは、Liquidという専用テンプレート言語でHTMLを組み立てます。ShopifyのサーバーがLiquidを評価し、商品名や価格などの動的データを差し込んだ完成済みのHTMLをブラウザへ返す。この流れをつかむと、表示崩れやデータ欠落の原因を追いやすくなります。
WordPressのPHPテンプレートに近い感覚ですが、決定的な違いはデータベースへ直接アクセスできない点です。Shopifyが用意したオブジェクト経由でしかデータを扱えず、この制約がテーマ設計の方針を大きく左右します。
サーバーサイドでHTMLが生成される仕組み
ユーザーが商品ページを開くと、ShopifyはURLに対応するテンプレート（例：product.liquid）を選び、該当商品のproductオブジェクトを渡してレンダリングします。クライアント側でJavaScriptが描画するわけではないので初期表示のSEOに強く、その代わり動的な操作にはAjaxやSection Rendering APIが要ります。
つまりLiquidの担当は「リクエスト時点のHTML生成」まで。生成後の対話的な挙動は別レイヤーで補う、という役割分担を意識しておきましょう。
テーマファイル構成とLiquidの読み込み順序
Onlineストア2.0のテーマは役割ごとにディレクトリが分かれています。読み込みの起点はlayout/theme.liquidで、この中の{{ content_for_layout }}にテンプレート本体が展開されます。
layout/：全ページ共通の外枠templates/：ページ種別ごとのJSONテンプレートsections/：再利用可能なUI単位snippets/：renderで呼び出す部品
この階層と展開順を押さえれば、どこを編集すれば意図した箇所に反映されるかが見えてきます。
オブジェクト・タグ・フィルターの3要素で読み解くLiquid構文
Liquidの構文は、データを出力する「オブジェクト」、処理を制御する「タグ」、値を加工する「フィルター」の3つに分解できます。この分類を意識するだけで、他人が書いたテーマコードの解読速度が段違いに上がります。
記法もシンプルで、出力は{{ }}、制御は{% %}で囲むだけ。どちらの括弧かを見れば役割を即座に判断できます。
商品や注文データを扱う主要オブジェクト
テーマ開発で頻繁に触れるのはproduct、collection、cart、customerあたりです。商品ページなら{{ product.title }}で商品名、{{ product.price | money }}で通貨形式の価格を出力できます。
ただし利用できるオブジェクトはテンプレートの種類で決まります。商品テンプレート以外でproductを参照しても値は空になるため、そのコンテキストで何が渡されているかを常に確認する習慣が欠かせません。
出力を制御するタグとフィルターの使い分け
タグは{% if %}や{% for %}といった制御構文を担い、フィルターは|で値を変換します。目的が別物なので混同しないこと。
たとえばコレクション内の商品をループ表示するなら{% for product in collection.products %}で繰り返し、画像は{{ product.featured_image | image_url: width: 400 }}とフィルターでサイズを指定します。ロジックはタグ、整形はフィルターと切り分けると、コードがぐっと読みやすくなります。
セクションとブロックで作る編集可能なテーマ実装
Shopifyのテーマを非エンジニアでも管理画面から編集できるのは、セクションとブロックのおかげです。セクションはページを構成する大きな区画、ブロックはその中で追加・並べ替えできる要素を指します。
開発者の仕事は、店舗運営者が触れる編集項目をあらかじめ設計しておくこと。ここをどれだけ丁寧に作り込むかで、納品後の運用のしやすさが決まります。
schema設定でカスタマイズ項目を定義する
各セクションファイル末尾の{% schema %}にJSONで設定を書くと、管理画面に入力欄が生成されます。見出しテキストの入力欄なら、次のように定義します。
{% schema %}
{
"name": "見出し",
"settings": [
{ "type": "text", "id": "heading", "label": "テキスト" }
]
}
{% endschema %}定義した値は{{ section.settings.heading }}で呼び出せます。typeにはtextのほかimage_pickerやcolorなど多彩な種類があり、要件に合わせて選べば直感的な編集UIを提供できます。
実装でつまずきやすいLiquidの落とし穴とデバッグ手法
最も多いトラブルは、参照したオブジェクトが空で何も表示されないケースです。Liquidはエラーで止まらず静かに空文字を返すため、原因の特定が厄介になります。まずは{{ product | json }}で中身を丸ごと出力し、期待するデータが渡っているかを確認するのが定石です。
空白の扱いも見落としがちです。{%- -%}のハイフンで前後の余白を制御しないと、意図しない改行がHTMLに残ります。ループ内で大量の空白が生まれると表示が崩れるので、地味ながら効いてきます。
デバッグ時はshopify theme devでローカルサーバーを立ち上げ、保存と同時にブラウザへ反映されるホットリロードを活用しましょう。管理画面で直接編集するより変更の因果関係を追いやすく、作業効率が上がります。
