We are developing a react liquid template for default theme and want to fetch public product info from the store using product id.
What is the best way to handle this?
Do we need to authenticate, or can we do this without authentication
If authentication is required what proper steps needs to be followed?
We got this endpoint https://.myshopify.com/products/the-compare-at-price-snowboard.js.
Is it possible to get same data from product id without auth?
As you may have found while searching the documentation, it seems that the Ajax API’s fetch(/products/HANDLE.js)
only supports “handle”, so you cannot retrieve products by “product ID”.
If you’re developing for a specific store
You can use the “storefront API”. In this case, you’ll install the “headless” app and create a “public access token”. This “public access token” can be safely used in environments visible to anyone, such as browsers.
You should be successful if you follow these steps:
You can use the “public access token” created above with JavaScript’s fetch
or similar, but using a library might be easier. If you’re using raw JavaScript from Liquid, the “Storefront API client” tab on the following page should be helpful:
If you prefer to stick with “native fetch”, the “curl” examples can be a good reference.
graphql is
query GetProductById {
product(id: YOUR_PRODUCT_ID) {
title
...other....
}
}
YOUR_PRODUCT_ID is “gid://shopify/Product/{ID_NUMBER}”.
ID_NUMBER is the last path of product page on admin screen.
see the document product - Storefront API
If you’re creating a public theme for multiple stores
As explained above, since “each store needs to prepare an access token”, I’ve concluded that it’s probably impossible. However, since I can’t say this with absolute certainty, I’d like to hear from anyone who has knowledge in this area.
Also, it might be possible to pass the access token through theme settings, but I’m not sure if that’s appropriate.
(Hydrogen actually passes public access tokens in HTML, so I think it might be okay.)