プロダクトAPIは、任意の商品情報をハンドルで取得するためのAPIです。このAPIを利用することで、商品情報を取得することができます。このAPIは、Liquid以外、例えばJavaScriptなどで利用してテーマカスタマイズを行う際に便利です。
Ajax プロダクトAPIを利用する
Ajax プロダクトAPIは、Shopifyのテーマ内で利用できる軽量のRESTエンドポイントを通じて、任意の商品情報を取得できます。
プロダクト情報の取得
プロダクト情報を取得するには、/{locale}/products/{product-handle}.jsエンドポイントを利用します。localeは、ストアのマーケット設定をしていればターゲットの言語でデータが返ってきます。
product-handleは、取得したい商品のハンドルを指定します。
例えばsampleというハンドルの商品情報を取得する場合、以下のようにリクエストを送信します。ここではテーマでの利用を想定しているため、window環境変数window.Shopify.routes.rootを使用しています。
fetch(window.Shopify.routes.root + 'ja/products/handle.js')
.then(response => response.json())
.then(product => alert('The title of this product is ' + product.title));
レスポンスデータは以下のようなJSON形式で返ってきます。Liquidのproductと同様の情報が含まれていますがvariantの在庫数などは含まれまれていないことがわかります。
{
"id": 329678821,
"title": "sample product",
"handle": "sample",
"description": "<p>Lorem Ipsum.</p>",
"published_at": "2025-06-12T16:28:11-04:00",
"created_at": "2025-06-12T16:28:13-04:00",
"vendor": "Shopify",
"type": "Coat",
"tags": [
"Spring"
],
"price": 12900,
"price_min": 12900,
"price_max": 12900,
"available": true,
"price_varies": false,
"compare_at_price": null,
"compare_at_price_min": 0,
"compare_at_price_max": 0,
"compare_at_price_varies": false,
"variants": [
{
"id": 794864229,
"title": "Small",
"options": [
"Small"
],
"option1": "Small",
"option2": null,
"option3": null,
"price": 12900,
"weight": 0,
"compare_at_price": null,
"inventory_management": "shopify",
"available": true,
"sku": null,
"requires_shipping": true,
"taxable": true,
"barcode": "49738645"
},
{
"id": 794864233,
"title": "Medium",
"options": [
"Medium"
],
"option1": "Medium",
"option2": null,
"option3": null,
"price": 12900,
"weight": 0,
"compare_at_price": null,
"inventory_management": "shopify",
"available": true,
"sku": null,
"requires_shipping": true,
"taxable": true,
"barcode": "49738657"
},
{
"id": 794864237,
"title": "Large",
"options": [
"Large"
],
"option1": "Large",
"option2": null,
"option3": null,
"price": 12900,
"weight": 0,
"compare_at_price": null,
"inventory_management": "shopify",
"available": true,
"sku": null,
"requires_shipping": true,
"taxable": true,
"barcode": "49738673"
}
],
"images": [
"//cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893"
],
"featured_image": "//cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
"options": [
{
"name": "Size",
"position": 1
}
],
"url": "/products/red-rain-coat"
}
ちなみにvariantは最大250個まで表示されます。plusプランでは2000variantsまで作成できるので、一部しか表示されないでしょう。JavaScriptで取得したデータを使って、Liquid以外でも商品情報を表示することができます。
販売プランの表示
商品情報を取得する際に、販売プランを表示することもできます。販売プランはサブスクや定期購入などの販売方法を指します。販売プランは、/products/{product-handle}/plans.jsエンドポイントを利用して取得できます。以下のようなレスポンスとなります。
{
"id":5290511958181,
// ...
"variants":[
{
"id":34620489400485,
// ...
"requires_selling_plan":false,
"selling_plan_allocations":[
{
"price":3120,
"compare_at_price":3900,
"per_delivery_price":3120,
"selling_plan_id":360613,
"selling_plan_group_id":14699254537353206000
},
{
"price":3510,
"compare_at_price":3900,
"per_delivery_price":3510,
"selling_plan_id":393381,
"selling_plan_group_id":14699254537353206000
}
]
}
],
"requires_selling_plan":false,
"selling_plan_groups":[
{
"id":14699254537353206000,
"name":"Subscribe and Save",
"options":[
{
"name":"Delivery Frequency",
"position":1,
"values":[
"Month",
"Week"
]
},
{
"name":"Billing Frequency",
"position":2,
"values":[
"Month",
"Week"
]
}
],
"selling_plans":[
{
"id":360613,
"name":"Pay every month, delivery every month | save 20%",
"description":"No commitment · Auto-renews · Skip or cancel anytime",
"options":[
{
"name":"Delivery Frequency",
"position":1,
"value":"Month"
},
{
"name":"Billing Frequency",
"position":2,
"value":"Month"
}
],
"recurring_deliveries":true
},
・・・
・・・
まとめ
Ajax プロダクトAPIを利用することで、商品情報を取得することができます。Liquid以外のカスタマイズで利用することができるため、JavaScriptなどで商品情報を取得して表示することができます。また、販売プランの情報も取得することができるため、サブスクリプションや定期購入などの販売方法を表示することができます。