Product .js, cart.js and the other JSON URLs
Read a Shopify product, the cart, recommendations or search suggestions as JSON on the storefront: /products/<handle>.js, /cart.js and other Ajax API URLs.
- Product
- GET /products/<handle>.js
- Cart
- GET /cart.js
- Prices
- Currency subunit (12900 = 129.00)
- Auth
- None, storefront only
- Last checked
In short
Add .js to a product URL, such as /products/example-product.js, and Shopify returns the product as JSON: variants with IDs, prices, availability, options and images. /cart.js returns the current cart, /recommendations/products.json returns related products and /search/suggest.json predictive search results. These are the documented Ajax API endpoints; they need no token and work on every plan, but only for what the online store already shows.
How to use it
- Open https://your-store.com/products/<handle>.js in the browser to see the product JSON.
- In theme JavaScript, build the URL from window.Shopify.routes.root so the market’s language path is kept.
- Use /cart.js for the cart (its currency field tells you the presentment currency).
- Use /recommendations/products.json?product_id=<id>&intent=related or /search/suggest.json?q=<term> for recommendations and suggestions.
Code
fetch-product.js// Reads a product as JSON from the storefront. Prices are in the currency's
// subunit (12900 = 129.00) and in the customer's presentment currency.
async function getProduct(handle) {
const response = await fetch(`${window.Shopify.routes.root}products/${handle}.js`);
if (!response.ok) throw new Error(`Product ${handle}: HTTP ${response.status}`);
return response.json();
}
getProduct('example-product')
.then((product) => {
for (const variant of product.variants) {
console.log(variant.id, variant.title, variant.price, variant.available);
}
})
.catch((error) => console.error(error.message));
endpoints.txt# Documented storefront JSON endpoints (Ajax API), prefix with the locale path
GET /products/<handle>.js one product: variants, prices, images, options
GET /cart.js the current cart, including currency
POST /cart/add.js, /cart/change.js, /cart/update.js, /cart/clear.js
GET /recommendations/products.json?product_id=<id>&limit=4&intent=related
GET /search/suggest.json?q=<query>&resources[type]=product
# Examples
https://your-store.com/products/example-product.js
https://your-store.com/fr/cart.js
https://your-store.com/recommendations/products.json?product_id=1234567890123&limit=4&intent=complementary
Written by Lintel. MIT license: free to use in your own store and in client work.
Limits and edge cases
- The product JSON lists at most 250 variants.
- Prices are in the customer’s presentment currency, in the currency’s subunit.
- /products/<handle>.json and /products.json also answer on many stores, but they aren’t in Shopify’s Ajax API reference, so their shape and limits aren’t guaranteed. Use the .js endpoints, or the Storefront API for apps.
- Predictive search returns 429 when you exceed its request limit; debounce calls while the customer types.
Questions
- How do I get a Shopify product as JSON?
- Add .js to the product URL, for example your-store.com/products/example-product.js.
- What is the difference between .js and .json on Shopify?
- Shopify’s Ajax API documents the .js product URL and cart.js. The .json variants exist on many stores but aren’t documented, so build on .js.
- Why are prices like 12900 instead of 129.00?
- The Ajax API returns money in the currency’s subunit, so divide by 100 for most currencies before showing it.
- Do I need an API key for /cart.js?
- No. It reads the visitor’s own cart from the storefront session; no token is needed.
Shopify documentation
- Checked on a Shopify store on the date shown. Shopify changes its admin often; if a step looks different, the idea usually still works.
- Examples use placeholder IDs and your-store.myshopify.com. Replace them with your own.
- MIT license for the code snippets.
Need this built, tested and maintained for your store? See Shopify development.
