--- title: product - Storefront API description: >- Retrieves a single [`Product`](/docs/api/storefront/2026-07/objects/Product) by its ID or handle. Use this query to build product detail pages, access variant and pricing information, or fetch product media and [metafields](/docs/api/storefront/2026-07/objects/Metafield). See some [examples of querying products](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections/getting-started). api_version: 2026-07 source_url: html: 'https://shopify.dev/docs/api/storefront/latest/queries/product' md: 'https://shopify.dev/docs/api/storefront/latest/queries/product.md' api_name: storefront api_type: graphql type: query --- # product query Retrieves a single [`Product`](https://shopify.dev/docs/api/storefront/2026-07/objects/Product) by its ID or handle. Use this query to build product detail pages, access variant and pricing information, or fetch product media and [metafields](https://shopify.dev/docs/api/storefront/2026-07/objects/Metafield). See some [examples of querying products](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections/getting-started). ## Arguments * handle [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) The handle of the `Product`. * id [ID](https://shopify.dev/docs/api/storefront/latest/scalars/ID) The ID of the `Product`. *** ## Possible returns * Product [Product](https://shopify.dev/docs/api/storefront/latest/objects/Product) Represents an item listed in a shop's catalog. Products support multiple [product variants](https://shopify.dev/docs/api/storefront/2026-07/objects/ProductVariant), representing different versions of the same product, and can include various [media](https://shopify.dev/docs/api/storefront/2026-07/interfaces/Media) types. Use the [`selectedOrFirstAvailableVariant`](https://shopify.dev/docs/api/storefront/2026-07/objects/Product#field-Product.fields.selectedOrFirstAvailableVariant) or [`variantBySelectedOptions`](https://shopify.dev/docs/api/storefront/2026-07/objects/Product#field-Product.fields.variantBySelectedOptions) fields to help customers find the right variant based on their selections. Products can be organized into [collections](https://shopify.dev/docs/api/storefront/2026-07/objects/Collection), associated with [selling plans](https://shopify.dev/docs/api/storefront/2026-07/objects/SellingPlanGroup) for subscriptions, and extended with custom data through [metafields](https://shopify.dev/docs/api/storefront/2026-07/objects/Metafield). Learn more about working with [products and collections](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections). * adjacent​Variants [\[Product​Variant!\]!](https://shopify.dev/docs/api/storefront/latest/objects/ProductVariant) non-null A list of variants whose selected options differ with the provided selected options by one, ordered by variant id. If selected options are not provided, adjacent variants to the first available variant is returned. Note that this field returns an array of variants. In most cases, the number of variants in this array will be low. However, with a low number of options and a high number of values per option, the number of variants returned here can be high. In such cases, it recommended to avoid using this field. This list of variants can be used in combination with the `options` field to build a rich variant picker that includes variant availability or other variant information. * case​Insensitive​Match [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false ### Arguments Whether to perform case insensitive match on option names and values. * ignore​Unknown​Options [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:true Whether to ignore product options that are not present on the requested product. * selected​Options [\[Selected​Option​Input!\]](https://shopify.dev/docs/api/storefront/latest/input-objects/SelectedOptionInput) The input fields used for a selected option. The input must not contain more than `250` values. *** * available​For​Sale [Boolean!](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) non-null Indicates if at least one product variant is available for sale. * category [Taxonomy​Category](https://shopify.dev/docs/api/storefront/latest/objects/TaxonomyCategory) The category of a product from [Shopify's Standard Product Taxonomy](https://shopify.github.io/product-taxonomy/releases/unstable/?categoryId=sg-4-17-2-17). * collections [Collection​Connection!](https://shopify.dev/docs/api/storefront/latest/connections/CollectionConnection) non-null A list of [collections](https://shopify.dev/docs/api/storefront/latest/objects/Collection) that include the product. * after [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) ### Arguments Returns the elements that come after the specified cursor. * before [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) Returns the elements that come before the specified cursor. * first [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the first `n` elements from the list. * last [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the last `n` elements from the list. * reverse [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false Reverse the order of the underlying list. *** * compare​At​Price​Range [Product​Price​Range!](https://shopify.dev/docs/api/storefront/latest/objects/ProductPriceRange) non-null The [compare-at price range](https://help.shopify.com/manual/products/details/product-pricing/sale-pricing) of the product in the shop's default currency. * created​At [Date​Time!](https://shopify.dev/docs/api/storefront/latest/scalars/DateTime) non-null The date and time when the product was created. * description [String!](https://shopify.dev/docs/api/storefront/latest/scalars/String) non-null A single-line description of the product, with [HTML tags](https://developer.mozilla.org/en-US/docs/Web/HTML) removed. * truncate​At [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) ### Arguments Truncates a string after the given length. *** * description​Html [HTML!](https://shopify.dev/docs/api/storefront/latest/scalars/HTML) non-null The description of the product, with HTML tags. For example, the description might include bold `` and italic `` text. * encoded​Variant​Availability [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) An encoded string containing all option value combinations with a corresponding variant that is currently available for sale. Integers represent option and values: \[0,1] represents option\_value at array index 0 for the option at array index 0 `:`, `,`, ``and `-` are control characters. `:` indicates a new option. ex: 0:1 indicates value 0 for the option in position 1, value 1 for the option in position 2. `,` indicates the end of a repeated prefix, mulitple consecutive commas indicate the end of multiple repeated prefixes. ``indicates a gap in the sequence of option values. ex: 0 4 indicates option values in position 0 and 4 are present. `-` indicates a continuous range of option values. ex: 0 1-3 4 Decoding process: Example options: \[Size, Color, Material] Example values: \[\[Small, Medium, Large], \[Red, Blue], \[Cotton, Wool]] Example encoded string: "0:0:0,1:0-1,,1:0:0-1,1:1,,2:0:1,1:0,," Step 1: Expand ranges into the numbers they represent: "0:0:0,1:0 1,,1:0:0 1,1:1,,2:0:1,1:0,," Step 2: Expand repeated prefixes: "0:0:0,0:1:0 1,1:0:0 1,1:1:1,2:0:1,2:1:0," Step 3: Expand shared prefixes so data is encoded as a string: "0:0:0,0:1:0,0:1:1,1:0:0,1:0:1,1:1:1,2:0:1,2:1:0," Step 4: Map to options + option values to determine existing variants: \[Small, Red, Cotton] (0:0:0), \[Small, Blue, Cotton] (0:1:0), \[Small, Blue, Wool] (0:1:1), \[Medium, Red, Cotton] (1:0:0), \[Medium, Red, Wool] (1:0:1), \[Medium, Blue, Wool] (1:1:1), \[Large, Red, Wool] (2:0:1), \[Large, Blue, Cotton] (2:1:0). * encoded​Variant​Existence [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) An encoded string containing all option value combinations with a corresponding variant. Integers represent option and values: \[0,1] represents option\_value at array index 0 for the option at array index 0 `:`, `,`, ``and `-` are control characters. `:` indicates a new option. ex: 0:1 indicates value 0 for the option in position 1, value 1 for the option in position 2. `,` indicates the end of a repeated prefix, mulitple consecutive commas indicate the end of multiple repeated prefixes. ``indicates a gap in the sequence of option values. ex: 0 4 indicates option values in position 0 and 4 are present. `-` indicates a continuous range of option values. ex: 0 1-3 4 Decoding process: Example options: \[Size, Color, Material] Example values: \[\[Small, Medium, Large], \[Red, Blue], \[Cotton, Wool]] Example encoded string: "0:0:0,1:0-1,,1:0:0-1,1:1,,2:0:1,1:0,," Step 1: Expand ranges into the numbers they represent: "0:0:0,1:0 1,,1:0:0 1,1:1,,2:0:1,1:0,," Step 2: Expand repeated prefixes: "0:0:0,0:1:0 1,1:0:0 1,1:1:1,2:0:1,2:1:0," Step 3: Expand shared prefixes so data is encoded as a string: "0:0:0,0:1:0,0:1:1,1:0:0,1:0:1,1:1:1,2:0:1,2:1:0," Step 4: Map to options + option values to determine existing variants: \[Small, Red, Cotton] (0:0:0), \[Small, Blue, Cotton] (0:1:0), \[Small, Blue, Wool] (0:1:1), \[Medium, Red, Cotton] (1:0:0), \[Medium, Red, Wool] (1:0:1), \[Medium, Blue, Wool] (1:1:1), \[Large, Red, Wool] (2:0:1), \[Large, Blue, Cotton] (2:1:0). * featured​Image [Image](https://shopify.dev/docs/api/storefront/latest/objects/Image) The featured image for the product. This field is functionally equivalent to `images(first: 1)`. * handle [String!](https://shopify.dev/docs/api/storefront/latest/scalars/String) non-null A unique, human-readable string of the product's title. A handle can contain letters, hyphens (`-`), and numbers, but no spaces. The handle is used in the online store URL for the product. * id [ID!](https://shopify.dev/docs/api/storefront/latest/scalars/ID) non-null A globally-unique ID. * images [Image​Connection!](https://shopify.dev/docs/api/storefront/latest/connections/ImageConnection) non-null List of images associated with the product. * after [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) ### Arguments Returns the elements that come after the specified cursor. * before [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) Returns the elements that come before the specified cursor. * first [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the first `n` elements from the list. * last [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the last `n` elements from the list. * reverse [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false Reverse the order of the underlying list. * sort​Key [Product​Image​Sort​Keys](https://shopify.dev/docs/api/storefront/latest/enums/ProductImageSortKeys) Default:POSITION Sort the underlying list by the given key. *** * is​Gift​Card [Boolean!](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) non-null Whether the product is a gift card. * media [Media​Connection!](https://shopify.dev/docs/api/storefront/latest/connections/MediaConnection) non-null The [media](https://shopify.dev/docs/apps/build/online-store/product-media) that are associated with the product. Valid media are images, 3D models, videos. * after [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) ### Arguments Returns the elements that come after the specified cursor. * before [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) Returns the elements that come before the specified cursor. * first [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the first `n` elements from the list. * last [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the last `n` elements from the list. * reverse [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false Reverse the order of the underlying list. * sort​Key [Product​Media​Sort​Keys](https://shopify.dev/docs/api/storefront/latest/enums/ProductMediaSortKeys) Default:POSITION Sort the underlying list by the given key. *** * metafield [Metafield](https://shopify.dev/docs/api/storefront/latest/objects/Metafield) Token access required A [custom field](https://shopify.dev/docs/apps/build/custom-data), including its `namespace` and `key`, that's associated with a Shopify resource for the purposes of adding and storing additional information. * key [String!](https://shopify.dev/docs/api/storefront/latest/scalars/String) required ### Arguments The identifier for the metafield. * namespace [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) The container the metafield belongs to. If omitted, the app-reserved namespace will be used. *** * metafields [\[Metafield\]!](https://shopify.dev/docs/api/storefront/latest/objects/Metafield) non-null Token access required A list of [custom fields](https://shopify.dev/docs/apps/build/custom-data) that a merchant associates with a Shopify resource. * identifiers [\[Has​Metafields​Identifier!\]!](https://shopify.dev/docs/api/storefront/latest/input-objects/HasMetafieldsIdentifier) required ### Arguments The list of metafields to retrieve by namespace and key. The input must not contain more than `250` values. *** * online​Store​Url [URL](https://shopify.dev/docs/api/storefront/latest/scalars/URL) The product's URL on the online store. If `null`, then the product isn't published to the online store sales channel. * options [\[Product​Option!\]!](https://shopify.dev/docs/api/storefront/latest/objects/ProductOption) non-null A list of product options. The limit is defined by the [shop's resource limits for product options](https://shopify.dev/docs/api/admin-graphql/latest/objects/Shop#field-resourcelimits) (`Shop.resourceLimits.maxProductOptions`). * first [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) ### Arguments Truncate the array result to this size. *** * price​Range [Product​Price​Range!](https://shopify.dev/docs/api/storefront/latest/objects/ProductPriceRange) non-null The minimum and maximum prices of a product, expressed in decimal numbers. For example, if the product is priced between $10.00 and $50.00, then the price range is $10.00 - $50.00. * product​Type [String!](https://shopify.dev/docs/api/storefront/latest/scalars/String) non-null The [product type](https://help.shopify.com/manual/products/details/product-type) that merchants define. * published​At [Date​Time!](https://shopify.dev/docs/api/storefront/latest/scalars/DateTime) non-null The date and time when the product was published to the channel. * requires​Selling​Plan [Boolean!](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) non-null Whether the product can only be purchased with a [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions/selling-plans). Products that are sold on subscription (`requiresSellingPlan: true`) can be updated only for online stores. If you update a product to be subscription-only (`requiresSellingPlan:false`), then the product is unpublished from all channels, except the online store. * selected​Or​First​Available​Variant [Product​Variant](https://shopify.dev/docs/api/storefront/latest/objects/ProductVariant) Find an active product variant based on selected options, availability or the first variant. All arguments are optional. If no selected options are provided, the first available variant is returned. If no variants are available, the first variant is returned. * case​Insensitive​Match [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false ### Arguments Whether to perform case insensitive match on option names and values. * ignore​Unknown​Options [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:true Whether to ignore unknown product options. * selected​Options [\[Selected​Option​Input!\]](https://shopify.dev/docs/api/storefront/latest/input-objects/SelectedOptionInput) The input fields used for a selected option. The input must not contain more than `250` values. *** * selling​Plan​Groups [Selling​Plan​Group​Connection!](https://shopify.dev/docs/api/storefront/latest/connections/SellingPlanGroupConnection) non-null A list of all [selling plan groups](https://shopify.dev/docs/apps/build/purchase-options/subscriptions/selling-plans/build-a-selling-plan) that are associated with the product either directly, or through the product's variants. * after [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) ### Arguments Returns the elements that come after the specified cursor. * before [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) Returns the elements that come before the specified cursor. * first [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the first `n` elements from the list. * last [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the last `n` elements from the list. * reverse [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false Reverse the order of the underlying list. *** * seo [SEO!](https://shopify.dev/docs/api/storefront/latest/objects/SEO) non-null The [SEO title and description](https://help.shopify.com/manual/promoting-marketing/seo/adding-keywords) that are associated with a product. * tags [\[String!\]!](https://shopify.dev/docs/api/storefront/latest/scalars/String) non-null A comma-separated list of searchable keywords that are associated with the product. For example, a merchant might apply the `sports` and `summer` tags to products that are associated with sportwear for summer. Updating `tags` overwrites any existing tags that were previously added to the product. To add new tags without overwriting existing tags, use the GraphQL Admin API's [`tagsAdd`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/tagsadd) mutation. * title [String!](https://shopify.dev/docs/api/storefront/latest/scalars/String) non-null The name for the product that displays to customers. The title is used to construct the product's handle. For example, if a product is titled "Black Sunglasses", then the handle is `black-sunglasses`. * total​Inventory [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Token access required The quantity of inventory that's in stock. * tracking​Parameters [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) URL parameters to be added to a page URL to track the origin of on-site search traffic for [analytics reporting](https://help.shopify.com/manual/reports-and-analytics/shopify-reports/report-types/default-reports/behaviour-reports). Returns a result when accessed through the [search](https://shopify.dev/docs/api/storefront/2026-07/queries/search) or [predictiveSearch](https://shopify.dev/docs/api/storefront/2026-07/queries/predictiveSearch) queries, otherwise returns null. * updated​At [Date​Time!](https://shopify.dev/docs/api/storefront/latest/scalars/DateTime) non-null The date and time when the product was last modified. A product's `updatedAt` value can change for different reasons. For example, if an order is placed for a product that has inventory tracking set up, then the inventory adjustment is counted as an update. * variant​By​Selected​Options [Product​Variant](https://shopify.dev/docs/api/storefront/latest/objects/ProductVariant) Find a product’s variant based on its selected options. This is useful for converting a user’s selection of product options into a single matching variant. If there is not a variant for the selected options, `null` will be returned. * case​Insensitive​Match [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false ### Arguments Whether to perform case insensitive match on option names and values. * ignore​Unknown​Options [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false Whether to ignore unknown product options. * selected​Options [\[Selected​Option​Input!\]!](https://shopify.dev/docs/api/storefront/latest/input-objects/SelectedOptionInput) required The input fields used for a selected option. The input must not contain more than `250` values. *** * variants [Product​Variant​Connection!](https://shopify.dev/docs/api/storefront/latest/connections/ProductVariantConnection) non-null A list of [variants](https://shopify.dev/docs/api/storefront/latest/objects/ProductVariant) that are associated with the product. * after [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) ### Arguments Returns the elements that come after the specified cursor. * before [String](https://shopify.dev/docs/api/storefront/latest/scalars/String) Returns the elements that come before the specified cursor. * first [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the first `n` elements from the list. * last [Int](https://shopify.dev/docs/api/storefront/latest/scalars/Int) Returns up to the last `n` elements from the list. * reverse [Boolean](https://shopify.dev/docs/api/storefront/latest/scalars/Boolean) Default:false Reverse the order of the underlying list. * sort​Key [Product​Variant​Sort​Keys](https://shopify.dev/docs/api/storefront/latest/enums/ProductVariantSortKeys) Default:POSITION Sort the underlying list by the given key. *** * variants​Count [Count](https://shopify.dev/docs/api/storefront/latest/objects/Count) The number of [variants](https://shopify.dev/docs/api/storefront/latest/objects/ProductVariant) that are associated with the product. * vendor [String!](https://shopify.dev/docs/api/storefront/latest/scalars/String) non-null The name of the product's vendor. *** ## Examples * ### Load products which are published in a given context #### Description The Storefront API will automatically limit your query to products that are published in any applicable catalogs. Unpublished products will behave just like they were archived or deleted: they will be omitted from connections and not found when queried by handle or ID. Use the \`@inContext\` directive to set the context explicitly; if omitted, the primary market will be used. > Note: If your app is a sales channel to which products can be published, then the Storefront API will only return products that are published both to your sales channel \_and\_ the market you’re querying for. In this example, the merchant has restricted their alarm clock from sale in the United Kingdom by unpublishing it from that market’s catalog. That product field returns \`null\` and that product is not included in the \`products\` connection response. #### Query ```graphql query Products @inContext(country: GB) { woolSweater: product(handle: "wool-sweater") { title } alarmClock: product(handle: "alarm-clock") { title } products(first: 2) { nodes { title } } } ``` #### cURL ```bash curl -X POST \ https://your-development-store.myshopify.com/api/2026-07/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \ -d '{ "query": "query Products @inContext(country: GB) { woolSweater: product(handle: \"wool-sweater\") { title } alarmClock: product(handle: \"alarm-clock\") { title } products(first: 2) { nodes { title } } }" }' ``` #### React Router ```javascript import { unauthenticated } from "../shopify.server"; export const loader = async () => { const { storefront } = await unauthenticated.storefront( 'your-development-store.myshopify.com' ); const response = await storefront.graphql( `#graphql query Products @inContext(country: GB) { woolSweater: product(handle: "wool-sweater") { title } alarmClock: product(handle: "alarm-clock") { title } products(first: 2) { nodes { title } } }`, ); const json = await response.json(); return json.data; } ``` #### Node.js ```javascript const client = new shopify.clients.Storefront({ domain: 'your-development-store.myshopify.com', storefrontAccessToken, }); const data = await client.query({ data: `query Products @inContext(country: GB) { woolSweater: product(handle: "wool-sweater") { title } alarmClock: product(handle: "alarm-clock") { title } products(first: 2) { nodes { title } } }`, }); ``` #### Response ```json { "woolSweater": { "title": "Wool sweater" }, "alarmClock": null, "products": { "nodes": [ { "title": "Wool sweater" } ] } } ``` * ### Load translated and localized content for a product #### Description By adding the \`@inContext\` directive to your query, you can access localized and translated content. #### Query ```graphql query ProductTitle @inContext(country: CA, language: FR) { product(handle: "wool-sweater") { title description } } ``` #### cURL ```bash curl -X POST \ https://your-development-store.myshopify.com/api/2026-07/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \ -d '{ "query": "query ProductTitle @inContext(country: CA, language: FR) { product(handle: \"wool-sweater\") { title description } }" }' ``` #### React Router ```javascript import { unauthenticated } from "../shopify.server"; export const loader = async () => { const { storefront } = await unauthenticated.storefront( 'your-development-store.myshopify.com' ); const response = await storefront.graphql( `#graphql query ProductTitle @inContext(country: CA, language: FR) { product(handle: "wool-sweater") { title description } }`, ); const json = await response.json(); return json.data; } ``` #### Node.js ```javascript const client = new shopify.clients.Storefront({ domain: 'your-development-store.myshopify.com', storefrontAccessToken, }); const data = await client.query({ data: `query ProductTitle @inContext(country: CA, language: FR) { product(handle: "wool-sweater") { title description } }`, }); ``` #### Response ```json { "product": { "title": "Chandail en laine", "description": "C’est très chaud!" } } ``` * ### Retrieve a single product #### Description Products are identified by an ID, which you can use in queries to retrieve information. To query a single product, you can use the product ID as an argument to the \`product\` query. #### Query ```graphql query getProductById($id: ID!) { product(id: $id) { title } } ``` #### Variables ```json { "id": "gid://shopify/Product/929898465" } ``` #### cURL ```bash curl -X POST \ https://your-development-store.myshopify.com/api/2026-07/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \ -d '{ "query": "query getProductById($id: ID!) { product(id: $id) { title } }", "variables": { "id": "gid://shopify/Product/929898465" } }' ``` #### React Router ```javascript import { unauthenticated } from "../shopify.server"; export const loader = async () => { const { storefront } = await unauthenticated.storefront( 'your-development-store.myshopify.com' ); const response = await storefront.graphql( `#graphql query getProductById($id: ID!) { product(id: $id) { title } }`, { variables: { "id": "gid://shopify/Product/929898465" }, }, ); const json = await response.json(); return json.data; } ``` #### Node.js ```javascript const client = new shopify.clients.Storefront({ domain: 'your-development-store.myshopify.com', storefrontAccessToken, }); const data = await client.query({ data: { "query": `query getProductById($id: ID!) { product(id: $id) { title } }`, "variables": { "id": "gid://shopify/Product/929898465" }, }, }); ``` #### Response ```json { "product": { "title": "Camper Van" } } ``` * ### Retrieve local prices for a product #### Description By adding the \`@inContext\` directive to your query, you can access local pricing for a specified country. These prices are returned in the currency configured for the country in Markets settings. They may be calculated from the base variant prices, or provided by the merchant as fixed local prices. #### Query ```graphql query ProductPricing @inContext(country: CA) { product(handle: "wool-sweater") { variants(first: 1) { nodes { price { amount currencyCode } } } } } ``` #### cURL ```bash curl -X POST \ https://your-development-store.myshopify.com/api/2026-07/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \ -d '{ "query": "query ProductPricing @inContext(country: CA) { product(handle: \"wool-sweater\") { variants(first: 1) { nodes { price { amount currencyCode } } } } }" }' ``` #### React Router ```javascript import { unauthenticated } from "../shopify.server"; export const loader = async () => { const { storefront } = await unauthenticated.storefront( 'your-development-store.myshopify.com' ); const response = await storefront.graphql( `#graphql query ProductPricing @inContext(country: CA) { product(handle: "wool-sweater") { variants(first: 1) { nodes { price { amount currencyCode } } } } }`, ); const json = await response.json(); return json.data; } ``` #### Node.js ```javascript const client = new shopify.clients.Storefront({ domain: 'your-development-store.myshopify.com', storefrontAccessToken, }); const data = await client.query({ data: `query ProductPricing @inContext(country: CA) { product(handle: "wool-sweater") { variants(first: 1) { nodes { price { amount currencyCode } } } } }`, }); ``` #### Response ```json { "product": { "variants": { "nodes": [ { "price": { "amount": "90.0", "currencyCode": "CAD" } } ] } } } ``` * ### Retrieve product media #### Description You can use the Storefront API to query a product's media and display it on a storefront. Specify the \`media\` connection on the \`Product\` object to return a product's media. You can then use a fragment to specify the fields that you want to return for each possible media type. #### Query ```graphql query getProductMedia($id: ID!) { product(id: $id) { id media(first: 10) { edges { node { mediaContentType alt ...mediaFieldsByType } } } } } fragment mediaFieldsByType on Media { ... on ExternalVideo { id embeddedUrl } ... on MediaImage { image { url } } ... on Model3d { sources { url mimeType format filesize } } ... on Video { sources { url mimeType format height width } } } ``` #### Variables ```json { "id": "gid://shopify/Product/929898465" } ``` #### cURL ```bash curl -X POST \ https://your-development-store.myshopify.com/api/2026-07/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \ -d '{ "query": "query getProductMedia($id: ID!) { product(id: $id) { id media(first: 10) { edges { node { mediaContentType alt ...mediaFieldsByType } } } } } fragment mediaFieldsByType on Media { ... on ExternalVideo { id embeddedUrl } ... on MediaImage { image { url } } ... on Model3d { sources { url mimeType format filesize } } ... on Video { sources { url mimeType format height width } } }", "variables": { "id": "gid://shopify/Product/929898465" } }' ``` #### React Router ```javascript import { unauthenticated } from "../shopify.server"; export const loader = async () => { const { storefront } = await unauthenticated.storefront( 'your-development-store.myshopify.com' ); const response = await storefront.graphql( `#graphql query getProductMedia($id: ID!) { product(id: $id) { id media(first: 10) { edges { node { mediaContentType alt ...mediaFieldsByType } } } } } fragment mediaFieldsByType on Media { ... on ExternalVideo { id embeddedUrl } ... on MediaImage { image { url } } ... on Model3d { sources { url mimeType format filesize } } ... on Video { sources { url mimeType format height width } } }`, { variables: { "id": "gid://shopify/Product/929898465" }, }, ); const json = await response.json(); return json.data; } ``` #### Node.js ```javascript const client = new shopify.clients.Storefront({ domain: 'your-development-store.myshopify.com', storefrontAccessToken, }); const data = await client.query({ data: { "query": `query getProductMedia($id: ID!) { product(id: $id) { id media(first: 10) { edges { node { mediaContentType alt ...mediaFieldsByType } } } } } fragment mediaFieldsByType on Media { ... on ExternalVideo { id embeddedUrl } ... on MediaImage { image { url } } ... on Model3d { sources { url mimeType format filesize } } ... on Video { sources { url mimeType format height width } } }`, "variables": { "id": "gid://shopify/Product/929898465" }, }, }); ``` #### Response ```json { "product": { "id": "gid://shopify/Product/929898465", "media": { "edges": [ { "node": { "mediaContentType": "IMAGE", "alt": "", "image": { "url": "https://cdn.shopify.com/s/files/1/0003/2595/3821/products/draft58.jpg?v=1773111786" } } }, { "node": { "mediaContentType": "IMAGE", "alt": "", "image": { "url": "https://cdn.shopify.com/s/files/1/0003/2595/3821/products/draft59.jpg?v=1773111786" } } } ] } } } ```