Shopify Liquid 商品オブジェクト｜product・variant・画像・メディア

1つの商品の情報（タイトル・価格・画像・バリアントなど）をまとめたオブジェクトです。

書き方

{{ product.title }}

商品ページでは自動で使えます。他のページでは all_products['handle'] やテーマ設定の商品選択から取り出します。

例

<h1>{{ product.title }}</h1>
<p>{{ product.price | money }}</p>

主要プロパティ（下に説明あり）
product.title　product.handle　product.url　product.price　product.compare_at_price　product.price_varies　product.available　product.description　product.vendor　product.type　product.tags　product.featured_image　product.featured_media　product.images　product.media　product.variants　product.has_only_default_variant　product.selected_or_first_available_variant　product.options_with_values　product.metafields　product.collections　product.created_at　product.selling_plan_groups　product.template_suffix

公式ドキュメント　｜　目次へ戻る ↑

商品のタイトルです。

書き方

{{ product.title }}

例

<h1>{{ product.title }}</h1>

出力

<h1>オーガニックTシャツ</h1>

公式ドキュメント　｜　目次へ戻る ↑

商品のハンドル（URLに使われる名前）です。

書き方

{{ product.handle }}

例

{{ product.handle }}

出力

organic-tee

公式ドキュメント　｜　目次へ戻る ↑

商品ページの URL です。

書き方

{{ product.url }}

例

<a href="{{ product.url }}">詳細</a>

出力

/products/organic-tee

公式ドキュメント　｜　目次へ戻る ↑

商品の価格（バリアントのうち最も安い価格）です。

書き方

{{ product.price | money }}

値は100倍の整数なので money フィルターで表示します。

例

{{ product.price | money }}

出力

¥3,300

公式ドキュメント　｜　目次へ戻る ↑

セール前の通常価格（割引前価格）です。

書き方

{{ product.compare_at_price | money }}

未設定なら nil です。price より大きいときだけセール表示にするのが定番です。

例

{% if product.compare_at_price > product.price %}<s>{{ product.compare_at_price | money }}</s>{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

バリアントによって価格が違うかどうかです。

書き方

{% if product.price_varies %}

「〜円から」の表示に使えます。

例

{% if product.price_varies %}{{ product.price_min | money }}〜{% endif %}

出力

¥2,800〜

公式ドキュメント　｜　目次へ戻る ↑

いずれかのバリアントが購入できるかどうかです。

書き方

{% if product.available %}

在庫切れでも「在庫切れでも販売を続ける」設定のバリアントがあれば true になります。

例

{% unless product.available %}<span>売り切れ</span>{% endunless %}

公式ドキュメント　｜　目次へ戻る ↑

商品説明（HTML を含む）です。

書き方

{{ product.description }}

例

{{ product.description | strip_html | truncate: 80 }}

公式ドキュメント　｜　目次へ戻る ↑

販売元（ベンダー、ブランド名）です。

書き方

{{ product.vendor }}

例

{{ product.vendor }}

出力

STORE DOJO

公式ドキュメント　｜　目次へ戻る ↑

商品タイプです。

書き方

{{ product.type }}

例

{{ product.type }}

出力

Tシャツ

公式ドキュメント　｜　目次へ戻る ↑

商品タグの配列です。

書き方

{{ product.tags }}

contains で特定タグの有無を判定する使い方が定番です。

例

{% if product.tags contains '送料無料' %}送料無料{% endif %}

公式ドキュメント　｜　関連TIPS：【Dawn】Shopifyで商品やブログに設定したタグについて「タグの完全一致」と「タグの部分一致」を判定するコード例　｜　目次へ戻る ↑

商品のメイン画像です。

書き方

{{ product.featured_image }}

例

{{ product.featured_image | image_url: width: 500 | image_tag }}

公式ドキュメント　｜　目次へ戻る ↑

商品のメインのメディア（画像または動画）です。

書き方

{{ product.featured_media }}

例

{{ product.featured_media | image_url: width: 500 | image_tag }}

公式ドキュメント　｜　目次へ戻る ↑

商品画像の配列です。

書き方

{% for image in product.images %}

例

{% for image in product.images %}{{ image | image_url: width: 200 | image_tag }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

商品のメディア（画像・動画・3D）の配列です。

書き方

{% for media in product.media %}

例

{{ product.media.size }}点

公式ドキュメント　｜　目次へ戻る ↑

商品のバリアントの配列です。

書き方

{% for variant in product.variants %}

例

{{ product.variants.size }}種類

公式ドキュメント　｜　目次へ戻る ↑

バリエーションを持たない商品かどうかです。

書き方

{% if product.has_only_default_variant %}

true のときはサイズ・色の選択欄を出さないようにします。

例

{% unless product.has_only_default_variant %}選択欄{% endunless %}

公式ドキュメント　｜　目次へ戻る ↑

選択中のバリアント、なければ最初に購入できるバリアントです。

書き方

{{ product.selected_or_first_available_variant.id }}

カート追加フォームの初期値に使う定番のプロパティです。

例

<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

公式ドキュメント　｜　目次へ戻る ↑

オプション（サイズ・色など）とその選択肢の一覧です。

書き方

{% for option in product.options_with_values %}

例

{% for o in product.options_with_values %}{{ o.name }}{% endfor %}

出力

サイズカラー

公式ドキュメント　｜　目次へ戻る ↑

商品のメタフィールドです。

書き方

{{ product.metafields.custom.キー.value }}

例

{{ product.metafields.custom.material.value }}

公式ドキュメント　｜　目次へ戻る ↑

その商品が入っているコレクションの配列です。

書き方

{% for c in product.collections %}

例

{{ product.collections | map: 'title' | join: ', ' }}

公式ドキュメント　｜　目次へ戻る ↑

商品が作成された日時です。

書き方

{{ product.created_at | date: '%Y/%m/%d' }}

「NEW」ラベルを一定期間だけ出す判定に使えます。

例

{{ product.created_at | date: '%Y/%m/%d' }}

公式ドキュメント　｜　目次へ戻る ↑

商品に設定された販売プラングループ（定期購入など）の配列です。

書き方

{{ product.selling_plan_groups }}

例

{% if product.selling_plan_groups.size > 0 %}定期購入あり{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

商品に割り当てたテンプレートの名前（product.〇〇.json の〇〇）です。

書き方

{{ product.template_suffix }}

例

{% if product.template_suffix == 'preorder' %}予約商品{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

商品のバリエーション（サイズ・色の組み合わせ）1つ分の情報です。

書き方

{{ variant.title }}

価格・在庫・SKU はバリアントごとに持っています。商品ページで選ばれているものは product.selected_or_first_available_variant で取れます。

例

{% for variant in product.variants %}
  {{ variant.title }}: {{ variant.price | money }}
{% endfor %}

出力

S / ネイビー: ¥3,300

主要プロパティ（下に説明あり）
variant.id　variant.title　variant.price　variant.compare_at_price　variant.available　variant.inventory_quantity　variant.sku　variant.barcode　variant.options　variant.option1　variant.image　variant.metafields　variant.url

公式ドキュメント　｜　目次へ戻る ↑

バリアントの ID です。

書き方

{{ variant.id }}

カート追加フォームで送る値です。

例

<option value="{{ variant.id }}">{{ variant.title }}</option>

公式ドキュメント　｜　目次へ戻る ↑

バリアント名（オプション値を / でつないだもの）です。

書き方

{{ variant.title }}

例

{{ variant.title }}

出力

M / ネイビー

公式ドキュメント　｜　目次へ戻る ↑

バリアントの価格です。

書き方

{{ variant.price | money }}

例

{{ variant.price | money }}

出力

¥3,300

公式ドキュメント　｜　目次へ戻る ↑

バリアントの通常価格（割引前価格）です。

書き方

{{ variant.compare_at_price | money }}

例

{% if variant.compare_at_price > variant.price %}{{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}%OFF{% endif %}

出力

20%OFF

公式ドキュメント　｜　目次へ戻る ↑

そのバリアントが購入できるかどうかです。

書き方

{% if variant.available %}

例

<option {% unless variant.available %}disabled{% endunless %}>{{ variant.title }}</option>

公式ドキュメント　｜　目次へ戻る ↑

バリアントの在庫数です。

書き方

{{ variant.inventory_quantity }}

在庫を追跡している場合のみ意味のある値になります。

例

{% if variant.inventory_quantity < 3 %}残り{{ variant.inventory_quantity }}点{% endif %}

出力

残り2点

公式ドキュメント　｜　目次へ戻る ↑

バリアントの SKU（在庫管理用の品番）です。

書き方

{{ variant.sku }}

例

品番: {{ variant.sku }}

公式ドキュメント　｜　目次へ戻る ↑

バリアントのバーコード（JAN など）です。

書き方

{{ variant.barcode }}

例

{{ variant.barcode }}

公式ドキュメント　｜　目次へ戻る ↑

バリアントのオプション値の配列です。

書き方

{{ variant.options }}

非推奨の option1〜option3 の代わりに使います。

例

{{ variant.options | join: ' / ' }}

出力

M / ネイビー

公式ドキュメント　｜　目次へ戻る ↑

1つ目のオプション値です。

書き方

{{ variant.option1 }}

非推奨です。variant.options を使います。

非推奨　代わりに：variant.options

例

{{ variant.options[0] }}

公式ドキュメント　｜　目次へ戻る ↑

バリアントに紐づけた画像です。

書き方

{{ variant.image }}

例

{% if variant.image %}{{ variant.image | image_url: width: 300 | image_tag }}{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

バリアントのメタフィールドです。

書き方

{{ variant.metafields.custom.キー.value }}

例

{{ variant.metafields.custom.note.value }}

公式ドキュメント　｜　目次へ戻る ↑

そのバリアントが選ばれた状態の商品ページ URL です。

書き方

{{ variant.url }}

例

{{ variant.url }}

出力

/products/organic-tee?variant=123

公式ドキュメント　｜　目次へ戻る ↑

「サイズ」「カラー」など、商品オプション1つ分の情報です。

書き方

{{ option.name }}

product.options_with_values で取り出し、選択肢（values）をループします。

例

{% for option in product.options_with_values %}
  {{ option.name }}: {{ option.values | join: ', ' }}
{% endfor %}

出力

カラー: ネイビー, ホワイト

公式ドキュメント　｜　目次へ戻る ↑

オプションの選択肢1つ（例: カラーの「ネイビー」）の情報です。

書き方

{{ value.name }}

在庫の有無（available）や色見本（swatch）、選ぶと切り替わるバリアントなどを持ちます。バリアント選択ボタンを自作するときに使います。

例

{% for value in option.values %}
  <button {% unless value.available %}disabled{% endunless %}>{{ value.name }}</button>
{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

バリアントで選ばれている、オプション名と値の組み合わせです。

書き方

{{ option.name }}: {{ option.value }}

例

{% for o in variant.options_with_values %}{{ o.name }}={{ o.value }} {% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

オプション値やフィルター値の色見本（色または画像）です。

書き方

{{ value.swatch.color }}

管理画面のカテゴリメタフィールドで色を設定すると使えます。

例

{% if value.swatch.color %}<span style="background: {{ value.swatch.color }}"></span>{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

画像1枚の情報（URL・幅・高さ・代替テキスト）です。

書き方

{{ image | image_url: width: 600 | image_tag }}

画像は image_url フィルターで URL にしてから表示します。alt（代替テキスト）は画像の内容を伝える大切な情報です。

例

{{ product.featured_image | image_url: width: 600 | image_tag: alt: product.featured_image.alt }}

公式ドキュメント　｜　目次へ戻る ↑

管理画面の「ファイル」にある画像を、ファイル名で取り出せるオブジェクトです。

書き方

{{ images['ファイル名'] }}

例

{{ images['campaign.jpg'] | image_url: width: 1200 | image_tag }}

公式ドキュメント　｜　目次へ戻る ↑

画像・動画・3Dモデル・外部動画をまとめて扱うための共通のオブジェクトです。

書き方

{{ media.media_type }}

media_type で種類を判定し、media_tag フィルターで種類に合ったタグを出せます。

例

{% for media in product.media %}
  {% case media.media_type %}
    {% when 'image' %}{{ media | image_url: width: 800 | image_tag }}
    {% else %}{{ media | media_tag }}
  {% endcase %}
{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

Shopify にアップロードした動画の情報です。

書き方

{{ video | video_tag }}

例

{{ media | video_tag: controls: true }}

公式ドキュメント　｜　目次へ戻る ↑

動画の形式・サイズごとの配信ファイルの情報です。

書き方

{{ source.url }}

例

{% for source in media.sources %}{{ source.mime_type }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

YouTube や Vimeo の埋め込み動画の情報です。

書き方

{{ media.host }}

例

{% if media.host == 'youtube' %}YouTube動画{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

3D モデルの情報です。

書き方

{{ media | model_viewer_tag }}

例

{{ media | model_viewer_tag }}

公式ドキュメント　｜　目次へ戻る ↑

3D モデルのファイル形式ごとの情報です。

書き方

{{ source.url }}

例

{% for source in media.sources %}{{ source.format }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

画像・動画以外のファイル（PDF など）の情報です。

書き方

{{ file.url }}

ファイル型のメタフィールドから取り出したときに使います。

例

<a href="{{ product.metafields.custom.manual.value.url }}">取扱説明書</a>

公式ドキュメント　｜　目次へ戻る ↑

画像の注目点（切り抜いても残したい位置）の座標です。

書き方

{{ image.presentation.focal_point }}

管理画面で設定した注目点を CSS の object-position に使えます。

例

<img style="object-position: {{ image.presentation.focal_point }}">

出力

50.0% 30.0%

公式ドキュメント　｜　目次へ戻る ↑

画像の表示設定（注目点など）です。

書き方

{{ image.presentation.focal_point }}

例

{{ image.presentation.focal_point }}

公式ドキュメント　｜　目次へ戻る ↑

定期購入などの販売プラン1つ分の情報です。

書き方

{{ selling_plan.name }}

定期購入アプリを使っている場合に、商品ページでプランを選ばせるときに使います。

例

{% for plan in product.selling_plan_groups.first.selling_plans %}{{ plan.name }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

販売プランをまとめたグループの情報です。

書き方

{{ group.name }}

例

{% for group in product.selling_plan_groups %}{{ group.name }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

販売プラングループの選択肢（配送間隔など）の情報です。

書き方

{{ option.name }}

例

{% for option in group.options %}{{ option.name }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

販売プランの選択肢の値です。

書き方

{{ option.value }}

例

{{ plan.options.first.value }}

公式ドキュメント　｜　目次へ戻る ↑

バリアントと販売プランの組み合わせごとの価格情報です。

書き方

{{ allocation.price | money }}

例

{{ variant.selected_selling_plan_allocation.price | money }}

公式ドキュメント　｜　目次へ戻る ↑

販売プランによる価格調整後の金額です。

書き方

{{ adj.price | money }}

例

{% for adj in allocation.price_adjustments %}{{ adj.price | money }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

販売プランの値引き内容（割合・金額）です。

書き方

{{ adj.value }}

例

{% for adj in plan.price_adjustments %}{{ adj.value }}{{ adj.value_type }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

販売プランで購入時に支払う金額の情報です。

書き方

{{ charge.value }}

予約販売などで、購入時は一部だけ支払う場合に使います。

例

{{ plan.checkout_charge.value }}

公式ドキュメント　｜　目次へ戻る ↑

購入数の最小・最大・刻み（いくつ単位で買えるか）のルールです。

書き方

{{ variant.quantity_rule.min }}

B2B（企業向け販売）の数量ルールで使います。

例

<input type="number" min="{{ variant.quantity_rule.min }}" step="{{ variant.quantity_rule.increment }}">

公式ドキュメント　｜　目次へ戻る ↑

まとめ買いで単価が下がる数量と、その単価の情報です。

書き方

{{ break.price | money }}

B2B の数量割引の表示に使います。

例

{% for b in variant.quantity_price_breaks %}{{ b.minimum_quantity }}個以上 {{ b.price | money }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

店舗ごとの在庫と店舗受け取りの可否です。

書き方

{{ availability.available }}

例

{% for a in variant.store_availabilities %}{{ a.location.name }}: {% if a.pick_up_enabled %}受け取り可{% endif %}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

在庫拠点（店舗・倉庫）の情報です。

書き方

{{ location.name }}

例

{{ availability.location.name }}

公式ドキュメント　｜　目次へ戻る ↑

単位価格の計量情報（100g あたり など）です。

書き方

{{ variant.unit_price_measurement.reference_unit }}

例

{{ variant.unit_price | money }}/{{ variant.unit_price_measurement.reference_unit }}

出力

¥120/100g

公式ドキュメント　｜　目次へ戻る ↑

重さ・長さなど、計測値型メタフィールドの値です。

書き方

{{ measurement.value }}{{ measurement.unit }}

例

{{ product.metafields.custom.weight.value.value }}{{ product.metafields.custom.weight.value.unit }}

公式ドキュメント　｜　目次へ戻る ↑

評価型メタフィールド（星の数など）の値です。

書き方

{{ rating.value }}

レビューアプリが商品の評価を書き込む型です。

例

{{ product.metafields.reviews.rating.value.rating }} / {{ product.metafields.reviews.rating.value.scale_max }}

出力

4.5 / 5.0

公式ドキュメント　｜　目次へ戻る ↑

Shopify 標準の商品分類（カテゴリ）の情報です。

書き方

{{ product.category.name }}

例

{{ product.category.name }}

出力

Tシャツ

公式ドキュメント　｜　目次へ戻る ↑

その商品に関連するおすすめ商品の情報です。

書き方

{{ recommendations.products }}

おすすめ商品 API を通して読み込んだセクションの中でだけ値が入ります。

例

{% for p in recommendations.products %}{{ p.title }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

ハンドルを指定して、任意の商品を取り出せるオブジェクトです。

書き方

{{ all_products['handle'] }}

1ページで使えるのは20件までです。たくさん必要なら商品リスト型の設定やコレクションを使います。

例

{% assign gift = all_products['gift-wrapping'] %}
{{ gift.title }}

出力

ギフトラッピング

公式ドキュメント　｜　目次へ戻る ↑

他のストアから来た商品（リモート商品）の情報です。

書き方

{{ remote_product.remote_details }}

例

{% if remote_product.remote_details %}{{ remote_product.remote_details.shop.name }}{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

リモート商品の出どころの情報です。

書き方

{{ remote_product.remote_details.shop.name }}

例

{{ remote_product.remote_details.shop.name }}

公式ドキュメント　｜　目次へ戻る ↑

リモート商品の元のストアの情報です。

書き方

{{ remote_shop.name }}

例

{{ remote_product.remote_details.shop.name }}

公式ドキュメント　｜　目次へ戻る ↑