Choose a version:

Product API

The Product API provides read-only access to product data. Use this API to get product information and build contextual experiences based on the selected product context. The API offers product details for implementing product-specific functionality and workflows.

Anchor to Use casesUse cases

Product access: Access the product identifier for product-specific functionality.
Product display: Build extensions showing product information, variant details, or inventory tools.
Contextual UI: Create interfaces that adapt based on product context and variant selection.
External integrations: Link product data with external inventory or product management platforms.

Support

Targets (3)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides product and variant details for the active context. Access the following properties on shopify to get product and variant identifiers for building contextual experiences.

Anchor to id id number required: The unique identifier for the product. Use for product lookups, implementing product-specific functionality, and integrating with external systems.
Anchor to variantId variantId number required: The unique identifier for the product variant. Use for variant-specific operations, cart additions, and inventory management.

Examples

jsx

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

return (

<s-page heading="Product Api">

<s-scroll-box>

<s-text>Product ID: {shopify.product.id}</s-text>

</s-scroll-box>

</s-page>

);

};

Examples

Description
Access the unique identifier of the current product in a product detail action context. This example shows how to use `shopify.product.id` to retrieve the product ID. This can be used for fetching additional product data, analytics, or implementing product-specific features and workflows.
jsx
```
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  return (
    <s-page heading="Product Api">
      <s-scroll-box>
        <s-text>Product ID: {shopify.product.id}</s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

Description

Access both product and variant identifiers to implement variant-specific functionality. This example shows how to retrieve `shopify.product.id` and `shopify.product.variantId` together. Use this pattern for variant-aware features like inventory checks, variant-specific pricing, or detailed product information displays.

jsx

import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const {id, variantId} = shopify.product;

  return (
    <s-page heading="Product & Variant">
      <s-scroll-box>
        <s-stack direction="block">
          <s-text>Product ID: {id}</s-text>
          <s-text>Variant ID: {variantId}</s-text>
        </s-stack>
      </s-scroll-box>
    </s-page>
  );
};

Anchor to Best practicesBest practices

Use product ID for data lookups: Use the product ID to fetch additional product information from external systems, inventory management platforms, or Shopify APIs when building comprehensive product experiences.
Implement variant-specific features: Use the variant ID to enable specialized functionality like variant-specific pricing, inventory checks, or cart operations.
Validate product access: Verify that the product ID and variant ID are valid before performing product-specific operations or external API calls.

Anchor to LimitationsLimitations

Product data reflects the current POS session and may not include real-time updates from other channels until the session is refreshed.

Was this page helpful?