POS UI Extension | Variant ID or SKU is not exposed into the UI extensions via the useAPI hook

[saiDev24]

When the user selects a product and then its variant from the lists on the POS product list page, they land on the Product details page of the variant product in the useApi hook called in the 'pos.product-details.block.render' target inside a custom UI extension inside the same PDP page. We need to see the useApi return a product object with the main product's ID along with an identifier for the variant product, such as variant ID or SKU. 

But today, we only get the ID of the main product without any variant identifier.

Can we identify the ID/SKU of the variant page we landed on in the UI extension?

[DaisyVo]

Hi @saiDev24 

I've gone through all the details you've provided, and it's become clear that the main issue is that the useApi hook in the pos.product-details.block.render target is only returning the main product's ID, but not any unique identifier for the variant (like Variant ID or SKU). This makes it difficult to handle variant-specific logic inside your custom POS UI extension.

Understanding the Problem

When a user selects a product variant from the POS product list, the Product Details Page (PDP) displays that specific variant. However, within your custom UI extension using the useApi hook, you're only getting the parent product's ID instead of the selected variant’s ID or SKU. Ideally, Shopify’s API should provide this information, but currently, it does not expose the variant details directly.

Possible Solutions & Workarounds

While Shopify doesn’t currently provide the variant ID in the useApi hook for POS UI extensions, here are a few ways you might be able to work around this limitation:

1. Use pos.product-details.block.render.after Instead

If pos.product-details.block.render does not return the variant data, you can try using pos.product-details.block.render.after. This might provide additional context after the variant is selected.

2. Fetch Variant Data Using Shopify Admin API

Since the API does return the parent product ID, you can:

• Use the Shopify Admin API to retrieve all variants of that product.
• Cross-check the variant details based on user selections.
• Extract the variant ID/SKU by matching it with the selected option.

Example API call:

fetch(`/admin/api/2024-01/products/${product_id}.json`, {

  method: "GET",

  headers: {

    "X-Shopify-Access-Token": "{ACCESS_TOKEN}",

    "Content-Type": "application/json"

  }

})

.then(response => response.json())

.then(data => {

  console.log(data.product.variants); // Contains all variants

});

Then, compare it with user selections to determine the variant ID.

3. Leverage POS Cart Data (useCart API)

Another alternative is to track variant selection by checking the POS cart. If the variant has been added to the cart, you might be able to extract the variant ID from useCart instead of relying solely on useApi.

4. Reach Out to Shopify Support or Post a Feature Request

If this is a critical issue for your POS workflow, it’s worth submitting a feature request to Shopify to expose the variant ID in useApi. Shopify’s POS API is still evolving, and they often take developer feedback into account for future updates.

Conclusion

Right now, Shopify doesn’t natively expose the variant ID in the useApi hook inside pos.product-details.block.render, but you can work around it by fetching product data from the Admin API or checking the cart data using useCart. If Shopify updates its API in the future, this might become easier.

If you need any other assistance, feel free to reply and I will try my best to help.
Best regards,
Daisy