### Product Query Example

Source: https://shopify.dev/docs/api/storefront/latest/queries/product

This example demonstrates how to query for products, including filtering by context and retrieving basic product information. It shows how to load products published in a given context and how unpublished products are handled.

```APIDOC
## Query product

### Description
Retrieves a specific product by its handle, or a list of products based on various criteria. The Storefront API automatically limits queries to products published in applicable catalogs. Unpublished products are omitted from results.

### Method
GET (or POST for complex queries)

### Endpoint
`/graphql`

### Parameters
#### Query Parameters (for GET requests, or within the JSON body for POST)
- **query** (String!): The GraphQL query string.

#### Request Body (for POST requests)
- **query** (String!): The GraphQL query string.
- **variables** (Object): Optional variables for the query.

### Query Example
```graphql
query Products @inContext(country: GB) {
  woolSweater: product(handle: "wool-sweater") {
    title
  }
  alarmClock: product(handle: "alarm-clock") {
    title
  }
  products(first: 2) {
    nodes {
      title
    }
  }
}
```

### Response
#### Success Response (200)
- **data** (Object): Contains the results of the query.
  - **woolSweater** (Product): The product with the handle 'wool-sweater'.
    - **title** (String): The title of the product.
  - **alarmClock** (Product): The product with the handle 'alarm-clock'.
    - **title** (String): The title of the product.
  - **products** (ProductConnection): A connection to a list of products.
    - **nodes** (Array<Product>): A list of product nodes.
      - **title** (String): The title of the product.

#### Response Example
```json
{
  "data": {
    "woolSweater": {
      "title": "Wool Sweater"
    },
    "alarmClock": null,
    "products": {
      "nodes": [
        {
          "title": "Wool Sweater"
        },
        {
          "title": "Another Product"
        }
      ]
    }
  }
}
```
```

--------------------------------

### Storefront API Client Installation

Source: https://shopify.dev/docs/api/storefront

Install the official Storefront API client for JavaScript projects using npm or yarn.

```bash
npm install --save @shopify/storefront-api-client
// or
yarn add @shopify/storefront-api-client
```

--------------------------------

### Shopify API Installation

Source: https://shopify.dev/docs/api/storefront

Install the official client library for Node.js applications using npm or yarn.

```bash
npm install --save @shopify/shopify-api
// or
yarn add @shopify/shopify-api
```

--------------------------------

### SitemapResourceInterface Example Variables

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/SitemapResourceInterface

Provides an example of variables that can be used with queries involving the SitemapResourceInterface.

```json
{
"handle": "",
"updatedAt": ""
}
```

--------------------------------

### Example Node ID Query

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/Node

A basic example of how to query for a node's ID.

```graphql
{
"id": ""
}
```

--------------------------------

### Get Customer by Access Token (React Router)

Source: https://shopify.dev/docs/api/storefront/latest/queries/customer

Example of fetching customer data within a React Router loader function using the Storefront API. It shows how to initialize the storefront client and make the GraphQL query.

```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 {
    customer(customerAccessToken: "bobs_token") {
      id
      firstName
      lastName
      acceptsMarketing
      email
      phone
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}
```

--------------------------------

### Retrieve First Three Products using Node.js

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This Node.js example shows how to use the Storefront client to query for the first three products.

```javascript
const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int) {
    products(first: $first) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});
```

--------------------------------

### Storefront API Product Response Example

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This is an example of the JSON response structure when querying for products.

```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo2NTcyMTE2NSwibGFzdF92YWx1ZSI6IjY1NzIxMTY1In0=",
        "node": {
          "title": "Storefront Spoon"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}
```

--------------------------------

### Retrieve Products (Search)

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This example demonstrates how to search for products using a query string.

```APIDOC
## GET /graphql.json

### Description
Retrieves a list of products matching a specific search query.

### Method
POST

### Endpoint
https://your-development-store.myshopify.com/api/2026-04/graphql.json

### Parameters
#### Query Parameters
- **first** (Int) - Optional - The number of results to retrieve.
- **query** (String) - Optional - The search query string.

### Request Example
```json
{
  "query": "query getProducts($first: Int, $query: String) { products(first: $first, query: $query) { edges { cursor node { title } } } }"
}
```

### Response
#### Success Response (200)
- **products** (Object) - Contains a list of product edges.
  - **edges** (Array) - A list of product edges.
    - **cursor** (String) - A cursor for pagination.
    - **node** (Object) - The product details.
      - **title** (String) - The title of the product.

#### Response Example
```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}
```
```

--------------------------------

### Create Storefront Access Token

Source: https://shopify.dev/docs/api/storefront

Example of creating a new storefront access token using a client library.

```ruby
storefront_token_response = client.post(
  path: 'storefront_access_tokens',
  body: {
    storefront_access_token: {
      title: "This is my test access token",
    }
  }
)

storefront_access_token = storefront_token_response.body['storefront_access_token']['access_token']
```

--------------------------------

### OnlineStorePublishable Variables Example

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/OnlineStorePublishable

Example of variables that can be used when querying the OnlineStorePublishable interface.

```json
{
	"onlineStoreUrl": ""
}
```

--------------------------------

### Create a Customer using cURL

Source: https://shopify.dev/docs/api/storefront/latest/mutations/customerCreate

Example of how to execute the customerCreate mutation using cURL. Remember to replace `{storefront_access_token}` with your actual token.

```bash
curl -X POST \
https://your-development-store.myshopify.com/api/2026-04/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "mutation customerCreate($input: CustomerCreateInput!) { customerCreate(input: $input) { customer { firstName lastName email phone acceptsMarketing } customerUserErrors { field message code } } }",
 "variables": {
    "input": {
      "firstName": "John",
      "lastName": "Smith",
      "email": "johnsmith@shopify.com",
      "phone": "+15146669999",
      "password": "5hopify",
      "acceptsMarketing": true
    }
  }
}'
```

--------------------------------

### Retrieve Products (Sorted)

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This example demonstrates how to retrieve a list of products sorted by a specified key.

```APIDOC
## GET /graphql.json

### Description
Retrieves a list of products sorted by a specified key.

### Method
POST

### Endpoint
https://your-development-store.myshopify.com/api/2026-04/graphql.json

### Parameters
#### Query Parameters
- **first** (Int) - Optional - The number of results to retrieve.
- **sortKey** (ProductSortKeys) - Optional - The key to sort the products by.

### Request Example
```json
{
  "query": "query getProducts($first: Int, $sortKey: ProductSortKeys) { products(first: $first, sortKey: $sortKey) { edges { cursor node { title } } } }"
}
```

### Response
#### Success Response (200)
- **products** (Object) - Contains a list of product edges.
  - **edges** (Array) - A list of product edges.
    - **cursor** (String) - A cursor for pagination.
    - **node** (Object) - The product details.
      - **title** (String) - The title of the product.

#### Response Example
```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}
```
```

--------------------------------

### BaseCartLine JSON Example

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/BaseCartLine

Provides an example of a BaseCartLine object in JSON format, illustrating its structure.

```json
{
"attribute": {
"key": ""
},
"attributes": "",
"cost": "",
"discountAllocations": "",
"estimatedCost": "",
"id": "",
"merchandise": "",
"quantity": "",
"sellingPlanAllocation": ""
}
```

--------------------------------

### Example Product Media Response

Source: https://shopify.dev/docs/api/storefront/latest/queries/product

This is a sample JSON response structure for a product media query, showing image details.

```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"
            }
          }
        }
      ]
    }
  }
}
```

--------------------------------

### Fetch Products with Storefront Client (authenticated)

Source: https://shopify.dev/docs/api/storefront

Example of fetching product data using the Storefront client with a Storefront Access Token.

```javascript
// Load the access token as per instructions above
const storefrontAccessToken = '<my token>';
// Shop from which we're fetching data
const shop = 'my-shop.myshopify.com';
  
// StorefrontClient takes in the shop url and the Storefront Access Token for that shop.
const storefrontClient = new shopify.clients.Storefront({
domain: shop,
storefrontAccessToken,
});
  
// Use client.query and pass your query as \`data\`
const products = await storefrontClient.query({
data: `{
products (first: 3) {
edges {
node {
id
title
}
}
}
}`,
});
```

--------------------------------

### Retrieve First Three Products

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This example demonstrates how to query for the first three products from the store. It includes the GraphQL query and cURL command for execution.

```graphql
query getProducts($first: Int) {
  products(first: $first) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}
```

```curl
curl -X POST \
https://your-development-store.myshopify.com/api/2026-04/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int) { products(first: $first) { edges { cursor node { title } } } }"
}'
```

--------------------------------

### DiscountApplication Variables

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/DiscountApplication

Example variables for creating or manipulating a DiscountApplication object.

```APIDOC
{
	"allocationMethod": "",
	"targetSelection": "",
	"targetType": "",
	"value": ""
}
```

--------------------------------

### Retrieve Products (Paginated)

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This example demonstrates how to retrieve a list of products with pagination using the `last` and `before` arguments.

```APIDOC
## GET /graphql.json

### Description
Retrieves a list of products with pagination support using `last` and `before` cursors.

### Method
POST

### Endpoint
https://your-development-store.myshopify.com/api/2026-04/graphql.json

### Parameters
#### Query Parameters
- **last** (Int) - Optional - The number of results to retrieve.
- **before** (String) - Optional - A cursor for use in pagination.

### Request Example
```json
{
  "query": "query getProducts($last: Int, $before: String) { products(last: $last, before: $before) { edges { cursor node { title } } } }"
}
```

### Response
#### Success Response (200)
- **products** (Object) - Contains a list of product edges.
  - **edges** (Array) - A list of product edges.
    - **cursor** (String) - A cursor for pagination.
    - **node** (Object) - The product details.
      - **title** (String) - The title of the product.

#### Response Example
```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo2NTcyMTE2NSwibGFzdF92YWx1ZSI6IjY1NzIxMTY1In0=",
        "node": {
          "title": "Storefront Spoon"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      }
    ]
  }
}
```
```

--------------------------------

### Fetch Products using Remix Oxygen

Source: https://shopify.dev/docs/api/storefront

Example of fetching product data within a Remix application using the @shopify/remix-oxygen library.

```javascript
import {json} from '@shopify/remix-oxygen';
  
export async function loader({context}) {
const PRODUCTS_QUERY = `#graphql
query products {
products(first: 3) {
edges {
node {
id
title
}
}
}
}
`;
const {products} = await context.storefront.query(PRODUCTS_QUERY);
return json({products});
}
```

--------------------------------

### Sample JSON Response for Products with Search

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

An example JSON response for a product search query, illustrating a single product result with its cursor and title.

```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}
```

--------------------------------

### Fetch a Specific Product by Handle

Source: https://shopify.dev/docs/api/storefront

Example of fetching a single product by its handle using a GraphQL query and variables.

```javascript
const productQuery = `
query ProductQuery($handle: String) {
product(handle: $handle) {
id
title
handle
}
}
`;
  
const {data, errors, extensions} = await client.request(productQuery, {
variables: {
handle: 'sample-product',
},
});
```

--------------------------------

### Fetch Three Most Recent Products (React Router)

Source: https://shopify.dev/docs/api/storefront

This example shows how to fetch the three most recent products using the Storefront API within a React Router context. It utilizes the `unauthenticated.storefront` method to get a storefront client.

```javascript
const { storefront } = await unauthenticated.storefront(
  'your-development-store.myshopify.com'
);

const response = await storefront.graphql(
  `#graphql
  query products {
    products(first: 3) {
      edges {
        node {
          id
          title
        }
      }
    }
  }`,
);

const data = await response.json();
```

--------------------------------

### Node.js Client for Products (Pagination)

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This Node.js example demonstrates how to query products using the Storefront client. It initializes the client with store domain and access token, then executes the GraphQL query.

```javascript
const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($last: Int, $before: String) {
    products(last: $last, before: $before) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});
```

--------------------------------

### Fetch Products with ShopifyAPI::Clients::Graphql::Storefront

Source: https://shopify.dev/docs/api/storefront

Example of fetching product data using the ShopifyAPI::Clients::Graphql::Storefront Ruby client.

```ruby
# Load the access token as per instructions above
store_front_access_token = '<my token>'
# Shop from which we're fetching data
shop = 'my-shop.myshopify.com'
  
# The Storefront client takes in the shop url and the Storefront Access Token for that shop.
storefront_client = ShopifyAPI::Clients::Graphql::Storefront.new(
shop,
storefront_access_token
)
  
# Call query and pass your query as `data`
my_query = <<~QUERY
{
products (first: 3) {
edges {
node {
id
title
}
}
}
}
QUERY
products = storefront_client.query(query: my_query)
```

--------------------------------

### Example Node Variable

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/Node

An example of a variable structure for a Node object, requiring an ID.

```json
{
	"id": ""
}
```

--------------------------------

### Customer Creation with Node.js Storefront Client

Source: https://shopify.dev/docs/api/storefront/latest/mutations/customerCreate

Example of creating a customer using the Node.js Storefront client. This snippet demonstrates initializing the client and making the mutation.

```javascript
const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: {
    "query": `mutation customerCreate($input: CustomerCreateInput!) {
      customerCreate(input: $input) {
        customer {
          firstName
          lastName
          email
          phone
          acceptsMarketing
        }
        customerUserErrors {
          field
          message
          code
        }
      }
    }`,
    "variables": {
        "input": {
            "firstName": "John",
            "lastName": "Smith",
            "email": "johnsmith@shopify.com",
            "phone": "+15146669999",
            "password": "5hopify",
            "acceptsMarketing": true
        }
    },
  },
});
```

--------------------------------

### Query Multiple Products using Node.js

Source: https://shopify.dev/docs/api/storefront/latest/queries/product

This Node.js example shows how to query multiple products using the Storefront API client. It initializes the client with your store's domain and access token.

```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
      }
    }
  }`,
});
```

--------------------------------

### Example CartDiscountAllocation Object

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/CartDiscountAllocation

An example JSON object representing a CartDiscountAllocation, showing placeholder values for its fields.

```json
{
"discountApplication": "",
"discountedAmount": "",
"targetType": ""
}
```

--------------------------------

### Fetch a Specific Product by Handle (Storefront API Client)

Source: https://shopify.dev/docs/api/storefront

This example demonstrates how to fetch a specific product by its handle using the Storefront API client. It requires a `client` object configured for API requests.

```javascript
const productQuery = `
  query ProductQuery($handle: String) {
    product(handle: $handle) {
      id
      title
      handle
    }
  }
`;

const {data, errors, extensions} = await client.request(productQuery, {
  variables: {
    handle: 'sample-product',
  },
});
```

--------------------------------

### Example DisplayableError Object

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/DisplayableError

An example JSON object representing a DisplayableError, showing empty values for field and message.

```json
{
"field": "",
"message": ""
}
```

--------------------------------

### Retrieve First Three Products (Node.js)

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This Node.js example demonstrates how to query for the first three products using the Shopify Storefront API client. Ensure your client is initialized with your store domain and access token.

```javascript
const client = new shopify.clients.Storefront ({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query ({
  data: `query getProducts($first: Int) { 
    products(first: $first) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});
```

--------------------------------

### JSON Scalar Example Value

Source: https://shopify.dev/docs/api/storefront/latest/scalars/JSON

This is an example of a valid JSON object that can be returned or sent as a value for the JSON scalar type.

```json
{
  "product": {
    "id": "gid://shopify/Product/1346443542550",
    "title": "White T-shirt",
    "options": [{
      "name": "Size",
      "values": ["M", "L"]
    }]
  }
}
```

--------------------------------

### Retrieve first three products in reverse order

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This example demonstrates how to query for the first three products in reverse order. It utilizes the `products` query with `first` and `reverse` arguments.

```APIDOC
## Retrieve first three products in reverse order

### Description
The following example shows how to query for first three products in reverse order.

### Query
```graphql
query getProducts($first: Int, $reverse: Boolean) {
  products(first: $first, reverse: $reverse) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}
```

### cURL
```bash
curl -X POST \
https://your-development-store.myshopify.com/api/2026-04/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int, $reverse: Boolean) { products(first: $first, reverse: $reverse) { edges { cursor node { 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 getProducts($first: Int, $reverse: Boolean) {
    products(first: $first, reverse: $reverse) {
      edges {
        cursor
        node {
          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 getProducts($first: Int, $reverse: Boolean) {
    products(first: $first, reverse: $reverse) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});
```

### Response
#### Success Response (200)
```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo5Mjk4OTg0NjUsImxhc3RfdmFsdWUiOiI5Mjk4OTg0NjUifQ==",
        "node": {
          "title": "Camper Van"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      }
    ]
  }
}
```
```

--------------------------------

### Shopify App React Router Package Installation

Source: https://shopify.dev/docs/api/storefront

Install the official package for React Router apps using npm or yarn.

```bash
npm install --save @shopify/shopify-app-react-router
// or
yarn add @shopify/shopify-app-react-router
```

--------------------------------

### ShopPayInstallmentsProductVariantPricing Fields

Source: https://shopify.dev/docs/api/storefront/latest/objects/ShopPayInstallmentsProductVariantPricing

Represents the pricing details for a product variant eligible for Shop Pay Installments. It includes information about availability, eligibility, the full price, and specific installment options.

```APIDOC
## ShopPayInstallmentsProductVariantPricing

### Description
The shop pay installments pricing information for a product variant.

### Fields
- **available** (Boolean!) - Whether the product variant is available.
- **eligible** (Boolean!) - Whether the product variant is eligible for Shop Pay Installments.
- **fullPrice** (MoneyV2!) - The full price of the product variant.
  - **amount** (Decimal!) - Decimal money amount.
  - **currencyCode** (CurrencyCode!) - Currency of the money.
- **id** (ID!) - The ID of the product variant.
- **installmentsCount** (Count) - The number of payment terms available for the product variant.
- **pricePerTerm** (MoneyV2!) - The price per term for the product variant.
  - **amount** (Decimal!) - Decimal money amount.
  - **currencyCode** (CurrencyCode!) - Currency of the money.

### Interfaces
- **Node**
```

--------------------------------

### Media Interface Schema Example

Source: https://shopify.dev/docs/api/storefront/latest/interfaces/Media

A JSON schema example representing the structure of a media object, including common fields like alt text, ID, content type, presentation, and preview image.

```json
{
"alt": "",
"id": "",
"mediaContentType": "",
"presentation": "",
"previewImage": ""
}
```

--------------------------------

### QueryRoot.productRecommendations

Source: https://shopify.dev/docs/api/storefront/latest/objects/QueryRoot

Returns recommended products for a given product, identified by either ID or handle. Use the `intent` argument to control the recommendation strategy.

```APIDOC
## QueryRoot.productRecommendations

### Description

Returns recommended products for a given product, identified by either ID or handle. Use the `intent` argument to control the recommendation strategy.

Shopify auto-generates related recommendations based on sales data, product descriptions, and collection relationships. Complementary recommendations require manual configuration through the Shopify Search & Discovery app. Returns up to ten `Product` objects.

### Arguments

* **intent** (ProductRecommendationIntent) - Default: RELATED - The recommendation intent that is used to generate product recommendations. You can use intent to generate product recommendations on various pages across the channels, according to different strategies.
* **productHandle** (String) - The handle of the product.
* **productId** (ID) - The id of the product.

```

--------------------------------

### Retrieve first two products after cursor

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This example shows how to query for the first two products after a specific cursor. It uses the `products` query with `first` and `after` arguments for pagination.

```APIDOC
## Retrieve first two products after cursor

### Description
The following example shows how to query for first two products after cursor. 

### Query
```graphql
query getProducts($first: Int, $after: String) {
  products(first: $first, after: $after) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}
```

### cURL
```bash
curl -X POST \
https://your-development-store.myshopify.com/api/2026-04/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int, $after: String) { products(first: $first, after: $after) { edges { cursor node { 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 getProducts($first: Int, $after: String) {
    products(first: $first, after: $after) {
      edges {
        cursor
        node {
          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 getProducts($first: Int, $after: String) {
    products(first: $first, after: $after) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});
```

### Response
#### Success Response (200)
```json
{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}
```
```

--------------------------------

### ShopPayInstallmentsFinancingPlanFrequency

Source: https://shopify.dev/docs/api/storefront/latest/enums/ShopPayInstallmentsFinancingPlanFrequency

The payment frequency for a Shop Pay Installments Financing Plan.

```APIDOC
enum ShopPayInstallmentsFinancingPlanFrequency {
  MONTHLY
  WEEKLY
}
```

--------------------------------

### Retrieve product media

Source: https://shopify.dev/docs/api/storefront/latest/queries/product

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.

```APIDOC
## 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-04/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"
  }
}'
```
```

--------------------------------

### ShopPayInstallmentsFinancingPlan

Source: https://shopify.dev/docs/api/storefront/latest/objects/ShopPayInstallmentsPricing

Details a specific financing plan available through Shop Pay Installments.

```APIDOC
## ShopPayInstallmentsFinancingPlan

**Description**
Represents a single financing plan.

**Fields**
*   `id` (ID!) - A globally-unique ID.
*   `terms` ([ShopPayInstallmentsFinancingPlanTerm!]!) - The terms of the financing plan.
*   `maxPrice` (MoneyV2!) - The maximum price to qualify for financing.
*   `minPrice` (MoneyV2!) - The minimum price to qualify for financing.
```

--------------------------------

### Product Media Connection Arguments

Source: https://shopify.dev/docs/api/storefront/latest/queries/productByHandle

Arguments for paginating and sorting product media.

```APIDOC
## Product Media Connection Arguments

### Description
Arguments that control pagination, sorting, and filtering of product media.

### Arguments

- **after** (String) - Optional - Anchor to after cursor for pagination.
- **before** (String) - Optional - Anchor to before cursor for pagination.
- **first** (Int) - Optional - Returns up to the first `n` elements.
- **last** (Int) - Optional - Returns up to the last `n` elements.
- **reverse** (Boolean) - Optional - Default: `false`. Reverses the order of the list.
- **sortKey** (ProductMediaSortKeys) - Optional - Default: `POSITION`. Sorts the list by the given key.
```

--------------------------------

### ShopPayInstallmentsFinancingPlan Object

Source: https://shopify.dev/docs/api/storefront/latest/objects/ShopPayInstallmentsFinancingPlan

The financing plan in Shop Pay Installments. Requires `unauthenticated_read_checkouts` access scope.

```APIDOC
## ShopPayInstallmentsFinancingPlan

object

Requires `unauthenticated_read_checkouts` access scope.
The financing plan in Shop Pay Installments.

### Fields

*   **id** (ID!)
*   **maxPrice** (MoneyV2!)
*   **minPrice** (MoneyV2!)
*   **terms** ([ShopPayInstallmentsFinancingPlanTerm!]!)
```

--------------------------------

### Create Customer Access Token (Node.js)

Source: https://shopify.dev/docs/api/storefront/latest/mutations/customerAccessTokenCreate

This Node.js example demonstrates creating a customer access token using the Shopify Storefront client. The `client.query` method is used to send the GraphQL mutation.

```javascript
const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `mutation customerAccessTokenCreate {
    customerAccessTokenCreate(input: {email: "ghaida@example.com", password: "7dx2gx2Z"}) {
      customerAccessToken {
        accessToken
      }
      customerUserErrors {
        message
      }
    }
  }`,
});
```

--------------------------------

### Fetch Product Media using Node.js

Source: https://shopify.dev/docs/api/storefront/latest/queries/product

This Node.js snippet demonstrates how to query product media using the Shopify Storefront client. Ensure you have the `storefrontAccessToken` defined.

```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"
    },
  },
});
```

--------------------------------

### ZERO_PERCENT Loan Type

Source: https://shopify.dev/docs/api/storefront/latest/enums/ShopPayInstallmentsLoan

Represents a zero-percent loan type within Shop Pay Installments.

```APIDOC
## ZERO_PERCENT

A zero-percent loan type.
```

--------------------------------

### SPLIT_PAY Loan Type

Source: https://shopify.dev/docs/api/storefront/latest/enums/ShopPayInstallmentsLoan

Represents a split-pay loan type within Shop Pay Installments.

```APIDOC
## SPLIT_PAY

A split-pay loan type.
```

--------------------------------

### INTEREST Loan Type

Source: https://shopify.dev/docs/api/storefront/latest/enums/ShopPayInstallmentsLoan

Represents an interest-bearing loan type within Shop Pay Installments.

```APIDOC
## INTEREST

An interest-bearing loan type.
```

--------------------------------

### Shopify Ruby Library Installation

Source: https://shopify.dev/docs/api/storefront

Add the official client library for Ruby applications using Bundler.

```ruby
bundle add shopify_api
```

--------------------------------

### Retrieve Product Media with cURL

Source: https://shopify.dev/docs/api/storefront/latest/queries/product

Demonstrates how to fetch product media using a cURL command, including the GraphQL query and variables. Replace placeholders with your store's details.

```bash
curl -X POST \
https://your-development-store.myshopify.com/api/2026-04/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"
  }
}'
```

--------------------------------

### Retrieve First Three Products using cURL

Source: https://shopify.dev/docs/api/storefront/latest/queries/products

This cURL command demonstrates how to query for the first three products using the Storefront API.

```curl
curl -X POST \
https://your-development-store.myshopify.com/api/2026-04/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int) { products(first: $first) { edges { cursor node { title } } } }"
}'
```

--------------------------------

### Cart Clone Mutation Variables

Source: https://shopify.dev/docs/api/storefront/latest/mutations/cartClone

This example demonstrates how to provide the necessary variables for the cartClone mutation, specifically the cartId.

```json
{
  "cartId": "gid://shopify/<objectName>/10079785100"
}
```