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.

Use cases

Product access: Access the product identifier for product-specific functionality.
Product extensions: Build extensions displaying product information or inventory tools.
Contextual UI: Create interfaces adapting based on current product context.
External integrations: Link product data with external inventory management platforms.

Support

Targets (3)

Supported targets

Anchor to propertiesProperties

The ProductApi object provides access to product data. Access these properties through api.product to interact with the current product context.

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

import React from 'react';

import {

Text,

Screen,

ScrollView,

Navigator,

reactExtension,

useApi,

} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {

const api = useApi<'pos.product-details.action.render'>();

return (

<Text>{`Product ID: ${api.product.id}`}</Text>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension('pos.product-details.action.render', () => (

));

Examples

Get the current product ID

Description

Retrieve the unique identifier of the product currently associated with the extension's context. This example shows how to access the product ID from product detail screens, enabling you to fetch additional product data, implement custom actions, or integrate with inventory and pricing systems.

React

import React from 'react';

import {
  Text,
  Screen,
  ScrollView,
  Navigator,
  reactExtension,
  useApi,
} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.product-details.action.render'>();
  return (
    <Navigator>
      <Screen name="ProductApi" title="Product Api">
        <ScrollView>
          <Text>{`Product ID: ${api.product.id}`}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.product-details.action.render', () => (
  <Modal />
));

TS

import {
  Navigator,
  Screen,
  ScrollView,
  Text,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.product-details.action.render', (root, api) => {
  const navigator = root.createComponent(Navigator);
  const screen = root.createComponent(Screen, {
    name: 'ProductApi',
    title: 'Product Api',
  });
  const scrollView = root.createComponent(ScrollView);
  const text = root.createComponent(Text);

  text.append(`Product ID: ${api.product.id}`);
  scrollView.append(text);
  screen.append(scrollView);
  navigator.append(screen);
  root.append(navigator);
});

Anchor to best-practicesBest practices

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

The API provides only basic product identifiers—use Shopify APIs or external systems to fetch additional product details like title, description, pricing, or inventory levels.
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?