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

color オブジェクト

テーマの色設定から取得した色をプロパティとして参照するオブジェクト。RGB、RGBA、HSL、OKLCh などの色空間でカラー値を取得できる。

用途
テーマカスタマイザーで設定した色をテンプレート内で参照し、背景色、テキスト色、枠線色などを動的に適用するとき。カラースウォッチの色情報を CSS 変数や HTML 属性に渡すとき。
設置場所
Liquid テンプレート内で `{{ swatch.color.red }}`、`{{ swatch.color.rgb }}`、`{{ swatch.color.hue }}` のように `swatch` オブジェクトの color プロパティを参照して使用する。settings で定義された色設定に対しても同じプロパティでアクセスできる。
注意点
color_space プロパティは 'srgb' または 'oklch' を返すため、色空間を明示的に確認したいときに使う。rgb / rgba / oklch / oklcha プロパティはスペース区切りの文字列で返されるため、CSS の `color: rgb({{ swatch.color.rgb }})` のように直接埋め込める。red、green、blue、hue、saturation、lightness、alpha、chroma は数値で返されるため、計算や条件分岐に使う場合は型チェック不要。
タグ:colorswatchsettingrgbhsl

仕様

245 行 / json
{
  "access": {
    "global": false,
    "parents": [
      {
        "object": "swatch",
        "property": "color"
      }
    ],
    "template": []
  },
  "deprecated": false,
  "deprecation_reason": "",
  "description": "> Tip:\n> Use [color filters](/docs/api/liquid/filters/color-filters) to modify or extract properties of a `color` object.",
  "properties": [
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The red component of the color, which is a number between 0 and 255.",
      "name": "red"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The green component of the color, which is a number between 0 and 255.",
      "name": "green"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The blue component of the color, which is a number between 0 and 255.",
      "name": "blue"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The red, green, and blue values of the color, represented as a space-separated string.",
      "name": "rgb"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The red, green, blue, and alpha values of the color, represented as a\nspace-separated string, with a slash before the alpha channel.",
      "name": "rgba"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The lightness, chroma, and hue values of the color, represented as a\nspace-separated string.",
      "name": "oklch"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The lightness, chroma, hue and alpha values of the color, represented as a\nspace-separated string, with a slash before the alpha channel.",
      "name": "oklcha"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The hue component of the color, which is a number between 0 and 360.",
      "name": "hue"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The saturation component of the color, which is a number between 0 and 100.",
      "name": "saturation"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The lightness component of the color, which is a number between 0 and 100.",
      "name": "lightness"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The alpha component of the color, which is a decimal number between 0.0 and 1.0.",
      "name": "alpha"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The chroma component of the color, which is a decimal number between 0.0 and 0.5.",
      "name": "chroma"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The color space of the color. Returns 'srgb' or 'oklch'",
      "name": "color_space"
    }
  ],
  "summary": "A color from a [`color` setting](/themes/architecture/settings/input-settings#color).",
  "name": "color",
  "examples": [
    {
      "name": "Referencing color settings directly",
      "description": "When a color setting is referenced directly, the hexidecimal color code is returned.\n",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ settings.colors_accent_2 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "json_data": {
    "path": "/",
    "handle": "settings.colors_accent_2",
    "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 行