Liquid Snippets by ALSEL
📘 公式リファレンス📦 リファレンス/オブジェクト初級

swatch オブジェクト

商品オプションやフィルター値のカラーバリエーション・画像を表示するためのオブジェクト。色見本や商品バリエーション画像を Liquid テンプレート内で参照する。

用途
商品詳細ページで色やサイズなどのオプション値を視覚的に表現するときに使用。フィルターの色見本をコレクションページに表示するとき。
設置場所
Liquid テンプレート内で `{{ product.options_with_values[0].values[0].swatch.color }}` または `{{ product.options_with_values[0].values[0].swatch.image }}` の形で参照する。フィルター値の場合は `{{ filter_value.swatch.color }}` で参照。
注意点
swatch は product_option_value と filter_value に属するため、直接グローバル参照はできない。Shopify 管理画面でカラーまたは画像がバリアント・フィルター値に紐付けられていることが前提。color は HEX 値（#RRGGBB 形式）で返され、image は画像オブジェクトなので `{{ swatch.image | image_url }}` でサイズ指定付き URL に変換する。
タグ:swatchcolorimageproduct-optionfilter-value

仕様

62 行 / json
{
  "access": {
    "global": false,
    "parents": [
      {
        "object": "product_option_value",
        "property": "swatch"
      },
      {
        "object": "filter_value",
        "property": "swatch"
      }
    ],
    "template": []
  },
  "deprecated": false,
  "deprecation_reason": "",
  "description": "",
  "properties": [
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "color",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The swatch color.",
      "name": "color"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "image",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The swatch image.",
      "name": "image"
    }
  ],
  "summary": "Color and image for visual representation.\nAvailable for [product option values](/docs/api/liquid/objects/product_option_value) and [filter values](/docs/api/liquid/objects/filter_value).",
  "name": "swatch",
  "examples": [],
  "json_data": {
    "path": "/products/mana-potion",
    "handle": "product.options_with_values[0].values[0].swatch",
    "data_from_file": ""
  },
  "return_type": []
}

出典・ライセンス

Source:
Shopify/theme-liquid-docs/data/objects.json
Repository:
https://github.com/Shopify/theme-liquid-docs
License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_header オブジェクト

Shopify が必要とするスクリプト（分析・チェックアウト・言語設定など）をすべて動的に出力するオブジェクト。theme.liquid の <head> タグ内に埋め込む必須要素。

📁 theme-liquid-docs·MIT·20 行
📘 公式リファレンス📦 リファレンス/オブジェクト中級

metaobjects オブジェクト

ストア全体のメタオブジェクト定義にアクセスするグローバルオブジェクト。個別のメタオブジェクトはタイプとハンドルで参照でき、メタオブジェクト定義のエントリをループで反復処理できる。

📁 theme-liquid-docs·MIT·20 行
📘 公式リファレンス📦 リファレンス/オブジェクト初級

additional_checkout_buttons オブジェクト

PayPal Express Checkout など、オフサイト決済に対応した外部決済プロバイダーがストアに設定されているかを真偽値で返す。`content_for_additional_checkout_buttons` と組み合わせて、該当するチェックアウトボタンを条件付きで表示する。

📁 theme-liquid-docs·MIT·27 行
📘 公式リファレンス📦 リファレンス/オブジェクト初級

canonical_url オブジェクト

現在のページの正規 URL を取得するオブジェクト。Google などの検索エンジンに対してどのページ版が正規であるかを指定するために使用する。

📁 theme-liquid-docs·MIT·27 行
📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_index オブジェクト

ホームページに表示するセクションの内容を動的に返すオブジェクト。Liquid インデックステンプレートで必ず使用する。

📁 theme-liquid-docs·MIT·27 行
📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_additional_checkout_buttons オブジェクト

PayPal、Apple Pay、Google Pay など複数の決済プロバイダが有効になっているとき、その決済ボタンを HTML として出力するオブジェクト。`additional_checkout_buttons` で有無を判定したうえで、このオブジェクトで実際のボタンを表示する。

📁 theme-liquid-docs·MIT·27 行