📘 公式リファレンス📦 リファレンス/オブジェクト初級
image オブジェクト
商品、記事、コレクション、バリアント、ブランドなど複数のオブジェクトから参照できる画像データ。画像の URL、サイズ、代替テキストを取得する。
用途
商品ページやコレクションページで、商品画像をカスタム指定サイズで表示したり、画像の縦横比を元にアスペクト比を固定するレイアウトを組むとき。
設置場所
Liquid テンプレート内で `{{ product.featured_image.src }}` や `{{ product.images[0].width }}` のような形で各プロパティを参照する。画像を HTML に出力する際は `image_url` フィルターと `image_tag` フィルターの使用を推奨。
注意点
`attached_to_variant?` プロパティは `product.featured_image` または `product.images` 経由でのみ利用可能で、それ以外のソース(記事や汎用ファイルの preview_image など)から参照すると `nil` が返される。`generic_file` と `media` オブジェクトの preview_image から `id` プロパティを参照する場合、結果は `nil` になるため注意。
仕様
359 行 / json{
"access": {
"global": false,
"parents": [
{
"object": "article",
"property": "image"
},
{
"object": "blog",
"property": "image"
},
{
"object": "collection",
"property": "image"
},
{
"object": "generic_file",
"property": "preview_image"
},
{
"object": "line_item",
"property": "image"
},
{
"object": "media",
"property": "preview_image"
},
{
"object": "model",
"property": "preview_image"
},
{
"object": "product",
"property": "featured_image"
},
{
"object": "product",
"property": "media"
},
{
"object": "product",
"property": "images"
},
{
"object": "variant",
"property": "image"
},
{
"object": "video",
"property": "preview_image"
},
{
"object": "brand",
"property": "favicon_url"
},
{
"object": "brand",
"property": "cover_image"
},
{
"object": "brand",
"property": "logo"
},
{
"object": "brand",
"property": "square_logo"
},
{
"object": "collection",
"property": "featured_image"
},
{
"object": "external_video",
"property": "preview_image"
},
{
"object": "filter_value",
"property": "image"
},
{
"object": "image",
"property": "preview_image"
},
{
"object": "swatch",
"property": "image"
},
{
"object": "variant",
"property": "featured_image"
},
{
"object": "remote_product",
"property": "featured_image"
},
{
"object": "user",
"property": "image"
},
{
"object": "page_image",
"property": ""
}
],
"template": []
},
"deprecated": false,
"deprecation_reason": "",
"description": "To learn about the image formats that Shopify supports, visit the [Shopify Help Center](https://help.shopify.com/manual/online-store/images/theme-images#image-formats).\n\n> Tip:\n> Use the [`image_url`](/docs/api/liquid/filters/image_url) and [`image_tag`](/docs/api/liquid/filters/image_tag) filters to display\n> images on the storefront.",
"properties": [
{
"deprecated": false,
"deprecation_reason": "",
"description": "",
"examples": [],
"return_type": [
{
"type": "image_presentation",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The presentation settings for the image.",
"name": "presentation"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "",
"examples": [],
"return_type": [
{
"type": "string",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The relative URL of the image.",
"name": "src"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "",
"examples": [],
"return_type": [
{
"type": "number",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The width of the image in pixels.",
"name": "width"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "",
"examples": [],
"return_type": [
{
"type": "number",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The height of the image in pixels.",
"name": "height"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "",
"examples": [],
"return_type": [
{
"type": "number",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The aspect ratio of the image as a decimal.",
"name": "aspect_ratio"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "",
"examples": [],
"return_type": [
{
"type": "string",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The alt text of the image.",
"name": "alt"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "The `attached_to_variant?` property is only available for images accessed through the following sources:\n\n- [`product.featured_image`](/docs/api/liquid/objects/product#product-featured_image)\n- [`product.images`](/docs/api/liquid/objects/product#product-images)\n\nIf you reference this property on an image from another source, then `nil` is returned.",
"examples": [],
"return_type": [
{
"type": "boolean",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "Returns `true` if the image is associated with a variant. Returns `false` if not.",
"name": "attached_to_variant?"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "If you reference the `id` property for preview images of [`generic_file`](/docs/api/liquid/objects/generic_file) or\n[`media`](/docs/api/liquid/objects/media) objects, then `nil` is returned.",
"examples": [],
"return_type": [
{
"type": "number",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The ID of the image.",
"name": "id"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "The `media_type` property is only available for images accessed through the following sources:\n\n- [`product.media`](/docs/api/liquid/objects/product#product-media)\n- [`file_reference` type metafields](/apps/metafields/types#supported-types)\n\nIf you reference this property on an image from another source, then `nil` is returned.",
"examples": [
{
"name": "Filter for media of a specific type",
"description": "You can use the `media_type` property with the [`where` filter](/docs/api/liquid/filters/where) to filter the [`product.media` array](/docs/api/liquid/objects/product#product-media) for all media of a desired type.\n",
"syntax": "",
"path": "/products/snake-venom",
"raw_liquid": "{% assign images = product.media | where: 'media_type', 'image' %}\n\n{% for image in images %}\n {{- image | image_url: width: 300 | image_tag }}\n{% endfor %}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
}
],
"return_type": [
{
"type": "string",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The media type of the image. Always returns `image`.",
"name": "media_type"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "The `position` property is only available for images that are associated with a product. If you reference this property\non an image from another source, then `nil` is returned.",
"examples": [],
"return_type": [
{
"type": "number",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The position of the image in the [`product.images`](/docs/api/liquid/objects/product#product-images) or [`product.media`](/docs/api/liquid/objects/product#product-media)\narray.",
"name": "position"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "The `preview_image` property is only available for images accessed through the following sources:\n\n- [`product.featured_media`](/docs/api/liquid/objects/product#product-featured_media)\n- [`product.media`](/docs/api/liquid/objects/product#product-media)\n- [`file_reference` type metafields](/apps/metafields/types#supported-types)\n\nIf you reference this property on an image from another source, then `nil` is returned.",
"examples": [],
"return_type": [
{
"type": "image",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "A preview image for the image.",
"name": "preview_image"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "The `product_id` property is only available for images associated with a product. If you reference this property on\nan image from another source, then `nil` is returned.",
"examples": [],
"return_type": [
{
"type": "number",
"name": "",
"description": "",
"array_value": ""
}
],
"summary": "The ID of the product that the image is associated with.",
"name": "product_id"
},
{
"deprecated": false,
"deprecation_reason": "",
"description": "The `variants` property is only available for images accessed through the following sources:\n\n- [`product.featured_image`](/docs/api/liquid/objects#product-featured_image)\n- [`product.images`](/docs/api/liquid/objects/product#product-images)\n\nIf you reference this property on an image from another source, then `nil` is returned.",
"examples": [],
"return_type": [
{
"type": "array",
"name": "",
"description": "",
"array_value": "variant"
}
],
"summary": "The product variants that the image is associated with.",
"name": "variants"
}
],
"summary": "An image, such as a product or collection image.",
"name": "image",
"examples": [
{
"name": "Referencing the `image` object directly",
"description": "When an `image` object is referenced directly, the image's relative URL path is returned.\n",
"syntax": "",
"path": "/products/forest-mushroom",
"raw_liquid": "{{ product.featured_image }}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
}
],
"json_data": {
"path": "/products/charcoal",
"handle": "product.featured_image",
"data_from_file": ""
},
"return_type": [
{
"type": "array",
"name": "",
"description": "",
"array_value": "image"
}
]
}出典・ライセンス
- 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 行