Liquidだけでページを組む
新タグ {% block %} と {% partial %}
Liquid July '26 Developer Preview — テンプレート1ファイルで構造・ブロック・部分更新を完結
Shopify Liquid July '26 開発者プレビューは、テーマ開発の新しいアプローチを試験提供します。{% block %}と{% partial %}という2つの新タグにより、ページ構造をLiquidテンプレートファイル1つに集約でき、クライアントサイドフレームワークへ処理を移さずとも動的なストアフロントのインタラクションを実現できます。既存テーマへの影響はなく、開発用ストアを作成して試すことができます。
012つの新タグが解決する課題
従来のShopifyテーマは、セクション・JSONテンプレート・テーマ設定という既存アーキテクチャで動作します。ページ構造が複数ファイルに分散するため、コードを追う際のコンテキストスイッチや、AI/コーディングエージェントによる自動編集のしづらさが課題でした。また、カートカウントなど一部UIだけをサーバーサイドで更新したい場合でも、クライアントサイドフレームワークの導入やページ全体のリロードに頼らざるを得ない場面がありました。
NEW TAGS02{% block %} — テンプレートから直接ブロックをレンダリング
{% block %}タグは、テーマブロックをテンプレートファイルの中から直接レンダリングします。ブロック名を指定し、inputs（入力値）を渡し、{% render %}と同様の感覚でボディコンテンツも提供できます。これにより、ページを構成するブロックの一覧と設定をテンプレートファイルを開くだけで把握・編集できます。
03{% partial %} — JSが更新できる名前付きHTML領域
{% partial %}タグは、サーバーレンダリングされるHTMLに「名前付き領域」を定義します。JavaScriptはこの名前付き領域を対象にして、ページ全体をリロードすることなくHTMLを更新できます。カートのアイテム数表示や在庫状態など、頻繁に変わるUIパーツをLiquidのサーバーレンダリングのまま動的に扱えるようになります。
04Theme Check 3.28.0 — Liquid-firstテーマ向け新ルール
このプレビューに合わせて、Theme Check 3.28.0に新しいチェックルールが追加されました。対象は以下のとおりです。
| チェック対象 | 内容 |
|---|---|
| 構文エラー | 新タグの文法ミスを検出 |
| 過剰な複雑さ | テンプレートのネスト深度などを警告 |
| ファイルサイズ超過 | 肥大化したテンプレートファイルを検出 |
| 不正なスキーマ構造 | ブロックスキーマの定義ミスを検出 |
| 引数・スキーマ・{% doc %}の不一致 | block arguments とスキーマ・docコメントのずれを検出 |
完全なルール一覧はTheme Check 3.28.0リリースノートを参照してください（元記事リンクより）。
USE CASES05業務に活かせるユースケース
- 課題
- 商品ページに多数のブロック（レビュー・バリアント選択・バッジ等）があり、どのブロックがどのテンプレートから呼ばれているか把握しづらい
- 打ち手
-
{% block %}タグを使い、商品テンプレートファイル内にブロック呼び出しと入力値を宣言的に記述する - 効果
- テンプレートファイル1つを読むだけでページ構成が把握でき、新メンバーへの引き継ぎやAIエージェントによる自動編集の精度が向上する
- 技術メモ
- {% block %}はinputsとbody contentを渡せる。詳細は公式{% block %}リファレンスを確認のこと
- 課題
- カートに商品を追加した際、ヘッダーのカートアイコンに表示される件数をリアルタイム更新したいが、ページ全体のリロードは避けたい
- 打ち手
-
{% partial cart-count %}でカートカウント領域を名前付き定義し、カート追加後のJSからその領域だけをサーバーレンダリング結果で更新する - 効果
- Vue/ReactなどのJSフレームワークを導入せずとも、サーバーサイドレンダリングを活かした部分更新UIが実現でき、パフォーマンスと保守性を両立できる
- 技術メモ
- {% partial %}は「named region of server-rendered HTML」をJSがrefreshする仕組み。詳細は公式{% partial %}リファレンスを確認のこと
- 課題
- AIコーディングエージェントを使ってテーマのUI改善を自動化したいが、構造が複数ファイルに分散していてエージェントが正確に編集できない
- 打ち手
- Liquid-first構成に移行し、ページ構造を1テンプレートファイルに集約することで、エージェントに渡すコンテキストを最小化する
- 効果
- エージェントが参照すべきファイルが明確になり、意図しない箇所への変更や見落としが減る。元記事でも「developers and coding agents can read and edit everything in one place」と明記されている
- 技術メモ
- skeleton themeのリリース候補版を出発点にすると新構成を素早く試せる（開発プレビュー用ストア必要）
06開発者が押さえるべきポイント
Liquid July '26 developer previewを有効にした開発用ストアを作成することで試用可能。本番ストアへの適用方法は記載なし。
セクション・テーマ設定・JSONテンプレートを使う既存テーマはそのまま動作継続。Liquid-firstモデルは既存アーキテクチャに「追加」される形。
新しい構成を試す際の出発点として、skeleton themeのリリース候補版が提供されている。自分のテーマに新タグを追加する方法も可。
Liquid-firstテーマ向けの新ルールはTheme Check 3.28.0で追加済み。新タグを使うプロジェクトでは同バージョン以降へのアップデートを推奨。
プレビュー段階のため、仕様は変更される可能性がある。気になる点はShopify開発者コミュニティへのフィードバックが推奨されている。
「Liquidテンプレート1ファイルでページを設計・部分更新まで完結できる」——このLiquid-firstモデルは、テーマの保守性向上とJSフレームワーク依存の解消を求める開発チームへの提案の軸になります。
※本記事はShopify公式の独立系解説です。仕様はプレビュー段階のため変更される可能性があります。最新情報は必ず公式ドキュメントでご確認ください。
Source: https://shopify.dev/changelog/developer-preview-liquid-block-and-partial-tags | 公開日: 2026年7月21日
Share:
メタフィールドフィルター不正クエリがエラー返却に
Shopifyアナリティクスがアプリ基盤に進化