記事のサマリー(TL;DR)
- {% block %} タグ:テンプレートから直接テーマブロックを呼び出せる再利用可能なコンポーネント記法
- {% partial %} タグ:JavaScript がページ全体リロードなしにサーバーレンダリング HTML の特定領域だけを更新可能
- Theme Check 3.28.0:構文エラー・ファイルサイズ超過・スキーマ不整合を自動検出する新ルールを追加
Shopify テーマ開発者・Headless 構成を検討する日本事業者への影響
Shopify Plus を活用する国内ブランドにとって、このプレビューは「React/Next.js などクライアントサイドフレームワークを採用しなくても動的 UI を実現できる」という選択肢が Liquid ネイティブで広がる点が重要です。
Headless Commerce への移行コストや保守負荷を懸念しながらも部分的な動的更新(在庫表示・カート連携など)を求めていたチームにとって、{% partial %} による部分リフレッシュは現実的な落としどころになります。既存の sections / JSON テンプレートとの後方互換性は維持されるため、現行テーマを壊さずに段階的に導入できます。
また Theme Check の強化は、開発会社やコーディングエージェントが大規模テーマを扱う際のレビュー品質を底上げします。日本では複数ブランドを単一テーマで管理するケースも多く、スキーマ不整合や過剰な複雑性を早期に検知できるルールは運用コスト削減に直結します。
詳細
Liquid July ’26 開発者プレビューの概要
Shopify は 2026年7月付けの Liquid 開発者プレビューとして、テーマページをよりシンプルに構成するための新しいアプローチを公開しました。従来はページ構造をセクション・JSON テンプレート・JavaScript に分散させる必要がありましたが、今回の更新により Liquid テンプレートの中だけでページ全体を定義・編集できる「Liquid-first 構成モデル」 が追加されます。
{% block %} タグ:再利用可能なテーマブロックをテンプレートから直接呼び出す
{% block %} タグは、既存の {% render %} タグに近い使用感でテーマブロックをテンプレートから直接レンダリングします。
主な特徴:
- ブロックへの命名:ブロックに名前を付けて識別しやすくする
- 入力値の受け渡し:
{% render %}と同様に引数(inputs)を渡せる - ボディコンテンツの提供:ブロック内に任意のコンテンツを記述可能
これにより、開発者やコーディングエージェントがテンプレート1ファイルを見ればページ構造のすべてを把握・編集できるようになります。コードレビューや AI によるテーマ編集の精度向上が期待できる構造です。
{% partial %} タグ:フルリロードなしのサーバーサイド部分更新
{% partial %} タグは、サーバーレンダリング HTML の名前付きリージョンを定義します。JavaScript がそのリージョンだけをページリロードなしに更新できるため、以下のようなユースケースに対応します。
- 在庫数・価格の動的更新
- カートへの追加後の UI 反映
- フィルタリング結果の部分更新
クライアントサイドフレームワーク(React・Vue など)に移行せずとも、Liquid ベースのストアフロントで動的なインタラクションを実装できる点が最大のメリットです。
Theme Check 3.28.0:Liquid-first テーマ向け新ルール群
プレビューと同時に Theme Check 3.28.0 がリリースされ、Liquid-first テーマに対応した新しい検証ルールが追加されました。
検出対象となる問題:
| カテゴリ | 内容 |
|---|---|
| 構文エラー | Liquid タグの記述ミス |
| 過剰な複雑性 | ネストや条件分岐が深すぎるロジック |
| ファイルサイズ超過 | 規定を超えたテンプレートファイル |
| 無効なスキーマ構造 | block スキーマの定義ミス |
| 引数・スキーマ・{% doc %} 宣言の不一致 | block に渡す引数と定義の齟齬 |
完全なルール一覧は Theme Check 3.28.0 リリースノート で確認できます。
既存テーマとの互換性・試し方
今回追加された Liquid-first 構成モデルは、既存の sections・テーマ設定・JSON テンプレートと並行して動作します。現行テーマは変更なしで動き続けるため、新旧モデルを段階的に併用できます。
試験的に利用するには:
- 「Liquid July ’26 開発者プレビュー」 が有効な開発ストアを作成する
- スケルトンテーマのリリースキャンディデートからスタートするか、既存テーマに新タグを追加する
- 開発者プレビュー概要・
{% block %}リファレンス・{% partial %}リファレンスを参照する
フィードバックは Shopify 開発者コミュニティ で受け付けています。