Display SKU using Checkout UI extensions

Technical Q&A

Topic summary

A developer encountered an issue displaying product SKUs in Shopify’s checkout order summary using Checkout UI extensions. While the title and id fields from the ProductVariant merchandise object worked correctly, the sku field was not rendering.

Troubleshooting approach:

  • Another user suggested logging the merchandise object with console.log(useTarget()) to verify the data path
  • Recommended accessing the SKU through the specific variant, as each variant has a unique SKU
  • Example code pattern: const sku = variants[0]?.sku

Resolution:
The original poster resolved the issue by examining the console log output and discovering the SKU wasn’t rendering as a string correctly. They shared working code using the Shopify Checkout UI extensions React framework with proper imports (reactExtension, Text, useTarget) and the purchase.checkout.cart-line-item.render-after extension point. The issue is now resolved.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to display the SKU for each product in the checkout order summary. According to this documentation, it looks like the “sku” field exists for merchandise “ProductVariant” union type. While the “title” and “id” fields work using the code below, the “sku” field does not. Does anyone know why this is?

import {
  reactExtension,
  Text,
  useTarget,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => 

![Adliaz_1-1730157229760.png|472x295](upload://cyOMkSp8vw6YE8tYFDmEqjtM3zy.png)
2

Hey,

Have you tried logging the merchandise object to check that your path is correct? You can do this with:

console.log(useTarget());

You may find that to access the SKU, you need to delve into the specific variant, as each variant has a different SKU. I’ve encountered some issues with this in the past. It could look something like this, but make sure to check the output of the console log. Feel free to share if you’re still having issues.

const {
  merchandise: { product: { variants } },
} = useTarget();
const sku = variants[0]?.sku;
1 Like
3

Thank you so much for the assistance! I figured it out based on the console log output that the sku was not rendering string correctly.

Here’s the fix to my code if anyone was wondering:

import {
  reactExtension,
  Text,
  useTarget,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => 

![Adliaz_0-1730170651913.png|465x305](upload://4ZFtzvzmnWcYm4T66AmhYOTcbUd.png)
1 Like
4

Perfect! Looks good :slightly_smiling_face: