Shopify Liquid: マーチャントとデベロッパーのための完全リファレンス

Shopify Liquidは、すべてのShopifyストアフロントを動かすオープンソースのテンプレート言語です。ストアのバックエンドデータ(商品、コレクション、カート、顧客)をショッパーが見るHTMLに接続し、3つのプリミティブを使用します。つまり、オブジェクト、タグ、フィルターです。この3つをうまく使いこなすことが、コンバージョン率の高いテーマと毎月アプリ購読やデベロッパーチケットで費用がかさむテーマの違いを生み出します。

重要ポイント

• Liquidの3つのプリミティブはオブジェクト {{ }}、タグ {% %}、フィルター | です。Shopifyテーマで行うあらゆるカスタマイズはこの3つを通じて実行されます。
• {% render %} タグが2019年に {% include %} に取って代わり、Online Store 2.0が対応する唯一のインクルージョンタグです。この2つを入れ替えることは、レガシーテーマにおける最速のパフォーマンス改善です。
• 2025年から2026年に追加された新しいフィルターには、fetchpriority と sizes 属性を持つ image_tag と、構造化メタフィールドレンダリング用の metafield_tag があります。
• 最適化されていない1つのコレクションループにネストされたタグチェックがあると、LCPに2~4秒追加され、モバイル収益全体の約7%相当の損失につながります。
• 3~5個の中規模アプリをネイティブLiquidセクションに置き換えると、通常は月$100~$300の節約になり、ページあたり150~600KBのサードパーティJavaScriptが削減されます。

Shopify Liquidとは

Liquidはテンプレート言語で、1つのテンプレートで静的コンテンツをホストし、レンダリングされるものに応じて動的に情報を挿入できます。たとえば、商品テンプレートは標準的なすべての商品属性を保持し、各商品URLに対して正しいコンテンツを動的に挿入します。

ShopifyのLiquidはオープンソース版を拡張し、ストア固有のオブジェクト(product、collection、cart、customer、shop)とコマース用に構築されたフィルター(money、image_url、metafield_tag)を追加しています。2026年1月13日現在、ShopifyはLiquidコードを内部で処理する方法も更新し、テーマレンダリングをより信頼性高くしています。マーチャント側での対応は不要です。

3つのプリミティブ

1. オブジェクト

オブジェクトは二重波括弧を使用して動的データを出力します。

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

すべてのテーマビルドで使用する主要なグローバルオブジェクト。

オブジェクトは単一の値を表すか、複数のプロパティを公開できます。request オブジェクトはページタイプに基づいた条件付きレンダリングに特に便利です。

2. タグ

タグは {% %} 構文を使用してロジックとフロー制御を追加します。知るべきカテゴリ。

制御フロー liquid {% if product.available %} <button>カートに追加</button> {% else %} <button disabled>売切</button> {% endif %}

イテレーション liquid {% for product in collection.products limit: 24 %} {% render 'product-card', product: product %} {% endfor %}

変数割り当て liquid {% assign sale_price = product.compare_at_price | minus: product.price %} {% capture button_label %}{{ product.title }}をカートに追加{% endcapture %}

テーマタグ(セクション、スニペット、レイアウト) liquid {% render 'product-card', product: product, show_vendor: true %} {% section 'announcement-bar' %} {% layout 'checkout' %}

3. フィルター

フィルターはパイプ文字 | を使用して出力を変更します。複数のフィルターは左から右に連鎖します。

{{ product.title | upcase | truncate: 50 }}
{{ product.price | money }}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', widths: '200,400,600,800' }}

重要なフィルターカテゴリ。

• マネーフィルター。 | money、| money_with_currency、| money_without_trailing_zeros。通貨記号をハードコードしないでください。| money フィルターはストアの通貨、ロケール、フォーマット設定を尊重します。ハードコードされた $ 記号はShopify Marketsで複数通貨を有効にした瞬間に動作しなくなります。
• 画像フィルター。 | image_url: width: X の後に | image_tag が続きます。最新の image_url と image_tag フィルターは古い img_url と img_tag に取って代わり、1つの連鎖で適切な srcset、sizes、遅延ロード、fetchpriority 属性を持つレスポンシブ画像を提供します。
• 配列フィルター。 | where、| map、| sort、| uniq、| join、| concat。| where を使用してループなしで配列をフィルターしてください。
• 文字列フィルター。 | upcase、| downcase、| truncate、| strip_html、| escape、| split。
• 数学フィルター。 | plus、| minus、| times、| divided_by、| ceil、| floor、| round。
• カラーフィルター。 | color_lighten、| color_darken、| color_mix、| color_contrast。color_contrast フィルターは2色間のコントラスト比を返し、アクセスしやすいバッジとボタン設計に不可欠です。
• ローカライゼーションフィルター。 | t(翻訳)、| format_address、| currency_selector。

| where の落とし穴についての注記。フィルターは大文字と小文字を区別します。| where: 'tags', 'Sale' は 'sale' タグにマッチしません。比較の前に | downcase を使用してください。

セクションと {% schema %} タグ

Online Store 2.0はセクションをホームページだけでなく、どこでも利用できるようにしました。構築するすべてのセクションには完全な {% schema %} ブロックを持つべきで、マーチャントはコードファイルを開かずにテーマエディターからコンテンツを編集できます。

各セクションは1つの {% schema %} タグのみを持つことができ、有効なJSONを含む必要があります。2つ以上、または別のLiquidタグ内にネストすると、構文エラーが発生します。

最小限だが完全なセクションスキーマ。

{% schema %}
{
  "name": "フィーチャーバナー",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "見出し",
      "default": "私たちの約束"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "背景画像"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "フィーチャーアイテム",
      "settings": [
        { "type": "text", "id": "feature_text", "label": "フィーチャー", "default": "送料無料" }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [{ "name": "フィーチャーバナー" }]
}
{% endschema %}

重要なルール。設定 id 値をデータベースの列名のように扱ってください。それらはセクションをインストールするすべてのストアの永続的なテンプレートJSONキーになります。id を変更すると既存の値が孤立します。text 設定を image_picker に変更してもデータは移行されません。セクションが大きくなる場合はプレフィックスを付けてください。card_heading もブロックにある場合は、単に heading ではなく hero_heading を使用してください。

プリセット付きセクションは静的にレンダリングしないでください。静的にレンダリングされたセクションはマーチャントが削除または並べ替えできません。

{% render %} タグ(そして {% include %} が死んだ理由)

{% render %} タグは、モダンShopifyテーマでスニペットをインクルードする唯一の方法です。{% include %} はスニペット間で変数スコープを共有しており、これは命名競合を引き起こし、パフォーマンスプロファイリングを信頼できなくしていました。{% render %} は分離されたスコープを作成します。スニペットは名前付きパラメーターとして渡されない限り親変数を読めません。

{# 非推奨 - 親スコープを共有 #}
{% include 'product-card' %}

{# 正しい - 分離されたスコープ、明示的な入力 #}
{% render 'product-card', product: product, show_vendor: true %}

{# ループ形式 #}
{% render 'product-card' for collection.products as product %}

分離されたスコープとは、スニペットは商品詳細ページ、検索結果、AJAXカートレスポンス、Section Rendering APIリクエスト全体で安全に再利用でき、書き直しが不要ということです。{% include %} を {% render %} に置き換えると、Shopify Theme Storeへの提出をブロックするすべてのTheme Checkエラーもクリアされます。

LiquidのメタフィールドField

メタフィールドは、アプリなしでカスタムデータ(サイズチャート、成分、取扱方法、仕様)でShopifyのデータモデルを拡張できます。Liquid開発にとって最も強力なメタフィールドタイプは。

• JSON構造化データ用(| metafield_tag でレンダリングするか、値をパースします)
• リッチテキストマーチャント編集可能なHTMLボディコピー用
• ファイル参照商品に添付された画像やビデオ用
• 商品/コレクション参照リソース間の明示的な関係用

アクセスパターン。

{% assign size_chart = product.metafields.custom.size_chart %}
{% if size_chart != blank %}
  {{ size_chart.value | metafield_tag }}
{% endif %}

!= blank ガードは交渉の余地がありません。これをスキップしてサイズチャートのない商品をレンダリングすると、空の <table> がレンダリングされ、モバイルSafariのレイアウトが壊れます。

常にShopify管理画面の設定 > カスタムデータを通じてメタフィールド定義を作成し、APIを通じて動的に作成しないでください。定義はタイプ検証、マーチャントフレンドリーなラベル、管理画面の可視性を提供します。YotpoやKlaviyoなどのサードパーティアプリはこれらの定義を読むため、クリーンなスキーマはスタック全体に供給されます。

実際に重要なパフォーマンスパターン

ループ最適化

ネストされたループは、私が監査するLiquidテーマにおける最も一般的なパフォーマンスキラーです。50個の商品のループと商品あたり20個のタグのループを組み合わせると、ページレンダリングあたり1,000回のイテレーションが実行されます。代わりに contains オペレーターを使用してください。

{# 悪い例: O(n*m) - 50個の商品 x 20個のタグ = 1,000回のイテレーション #}
{% for product in collection.products %}
  {% for tag in product.tags %}
    {% if tag == 'featured' %}...{% endif %}
  {% endfor %}
{% endfor %}

{# 良い例: 1回のパス、containsチェックはO(1) #}
{% for product in collection.products limit: 24 %}
  {% if product.tags contains 'featured' %}...{% endif %}
{% endfor %}

常にコレクションループに limit: を追加してください。1つの最適化されていないループはモバイルのLCPに2~4秒追加できます。

画像レンダリング

{# 悪い例: ディメンション、srcset、ブラウザーが空間を確保できないなし(CLS) #}
<img src="{{ product.featured_image | img_url: 'master' }}">

{# 良い例: srcset、遅延ロード、明示的な幅ヒント #}
{{ product.featured_image
  | image_url: width: 800
  | image_tag:
      loading: 'lazy',
      widths: '200,400,600,800',
      sizes: '(min-width: 768px) 400px, 100vw',
      alt: product.title }}

image_tag フィルターは、以前手動でsrcsetを構築するのに3行のHTMLが必要だったことを1行で実現します。

空白文字制御

Liquidはすべてのタグの周囲に空白文字を出力します。大きなテンプレートではこれでHTMLが肥大化し、TTFBが遅くなります。- 修飾子を使用してそれをストリップしてください。

{%- for product in collection.products -%}
  {{- product.title -}}
{%- endfor -%}

Section Rendering API

Section Rendering APIにより、セクションはAJAXを通じて独立してレンダリングでき、フルページリロードなしで高速なページ遷移と動的カートの更新が可能になります。これは、ヘッドレスに行く必要なく、標準Liquidテーマ内でアプリのようなエクスペリエンスを実現するための基盤です。

Theme Checkとツール

Theme Check 2.0はShopify CLIに組み込まれており、デプロイ前にパフォーマンスの問題、アクセシビリティの問題、非推奨パターンの使用をキャッチします。すべてのコミットで実行してください。それはフラグを立てます。

• {% include %} 呼び出し(非推奨)
• 画像タグの alt 属性がない
• img_url の使用(image_url に置き換えられました)
• limit: なしのループ
• theme.liquid の content_for_header がない

Theme Inspectorオーバーレイは、Liquidレンダリング時間をストアフロント上に直接表示し、最適化する前にどのセクション、スニペット、ループが遅いかを確認できます。

2026年現在、ShopifyのDev MCPにより、AIエージェントは検証済みのLiquidコードを生成し、セクションスキーマをスキャフォールドできるようになり、ボイラープレート作業を高速化しています。AI出力を最初のドラフトとして扱い、Shopify固有のエッジケースを必ず確認してください。

アプリ置き換え。Liquidがネイティブでできること

3~5個のアプリをテーマごとにネイティブLiquidセクションで置き換えると、通常月$100~$300の節約になり、150~600KBのサードパーティJavaScriptが削減されます。アプリの肥大化はモバイルあたり40~200msのコストがかかり、これはLighthouseのモバイルスコアを80から60に下げる正確な範囲です。

Liquidがネイティブで処理する機能(アプリ不要)。

• カウントダウンバナースキーマ制御の終了日付付き
• FAQアコーディオン質問ごとのブロックアーキテクチャ付き
• テスティモニアルグリッド星評価とメタフィールド保存されたレビュー付き
• スティッキーカートに追加バーIntersectionObserverプラスLiquid商品セクション経由
• フィーチャー比較表JSONメタフィールドを使用
• ビフォーアフター画像スライダーバニラJSと2つの画像ピッカー設定付き

セクションはアプリに3つの軸で勝ります。ペイント前にレンダリング(レイアウトシフトなし)、テーマリポジトリに存在(バージョン管理は簡単)、スキーマ設定を公開し、マーチャントはデベロッパーなしでコンテンツを編集できます。

Liquid対Hydrogen。正直な答え

Liquidは広大多数のShopifyストアに最適な選択肢です。開発が高速で、メンテナンスコストが低く、ShopifyのCDNとホスティングインフラへのフルアクセスがあるからです。ヘッドレス(Hydrogen/Oxygen)は、専任フロントエンドエンジニアリングチームと複雑なマルチストアフロントアーキテクチャを持つブランドに適しています。

専任フロントエンドチーム、3つ以上のストアフロント共有バックエンド、またはLiquidが本当に到達できないインタラクションモデルがある場合はヘッドレスに移行してください。他のすべての人にとって、質問は「LiquidかHydrogenか」ではなく「2年で恥ずかしくないLiquidをどう書くか」です。

テーマの監査または構築を支援する必要がある場合は、Shopifyテーマデベロッパーサービスページを参照するか、パフォーマンスが特定のボトルネックである場合はShopifyスピード最適化を探索してください。

クイックリファレンスチートシート

出力構文

{{ product.title }}              {# 文字列出力 #}
{{ product.price | money }}      {# フィルター出力 #}
{{- product.title -}}            {# 空白文字がストリップされました #}

制御フロー

{% if %} / {% elsif %} / {% else %} / {% endif %}
{% unless %} / {% endunless %}
{% case product.type %}{% when 'Apparel' %}...{% endcase %}

ループ

{% for item in array limit: 24 offset: 0 %}
  {{ forloop.index }} of {{ forloop.length }}
{% else %}
  アイテムが見つかりません。
{% endfor %}

一目でわかる最も使用されるフィルター

| money               {# 通貨安全な価格出力 #}
| image_url: width: X {# CDNリサイズされた画像URL #}
| image_tag           {# フルレスポンシブ <img> タグ #}
| metafield_tag       {# 正しいHTMLでメタフィールド値をレンダリング #}
| where: 'key', val   {# ループなしで配列をフィルター #}
| map: 'property'     {# オブジェクトの配列からプロパティを抽出 #}
| json                {# スクリプトタグの安全なJSON出力 #}
| t                   {# 翻訳キーのルックアップ #}
| handleize          {# 文字列をURL安全なハンドルに #}
| date: '%B %d, %Y'  {# フォーマットされた日付出力 #}

このポストとともに公式Liquidリファレンスをブックマークしてください。公式ドキュメントはすべてのオブジェクトプロパティとフィルターパラメーターを完全に網羅しています。