Checkout UI Extension - getting variant stock in checkout

Extensions
1

Hi, is it possible to retrieve the quantity of variants added to the checkout in a Checkout UI app? I’m fetching values from the product variant metafields, but I can’t access their stock. Just to clarify, I have unauthenticated_read_product_inventory added to the scope. This is crucial, as the entire logic relies on fetching the stock.

Thanks in advance for your help!

2

Hey @lynthius - I believe you should be able to use the Cart Lines API: Cart Lines

It does look like we return the quantity of the variants present on a line item here.

Let me know if I can clarify anything more on my end - hope this helps!

3

Thanks @Alan_G, I can grab the quantity of line items, but I need to check the stock of every product or at least if it is out of stock. Like this:

query VariantInventory($id: ID!) {
  node(id: $id) {
    ... on ProductVariant {
      id
      currentlyNotInStock
      quantityAvailable
    }
  }
}
4

Ah, gotcha! No worries @lynthius - you should be able to pull that info using the storefront API like this:

{
  product(id:"gid://shopify/Product/7330367832086") {
    title
    variants(first: 10) {
      edges {
        node {
          id
          title
          quantityAvailable
          sku
          price {
            amount
            currencyCode
          }
        }
      }
    }
  }
}

You should be able to pull the product ID using the Cart Lines API there and then make the query directly using the Storefront API through this method within the UI extension: Storefront API

Let me know if I can help out further!

1 Like
5

@Alan_G - Is there a way to get the product variant id via the Cart Lines API? I see we can get a merchandise id, is that the same thing?

6

Yes it should be, have you tried logging it out? It’ll be a GID so you should be able to see gid://shopify/ProductVariant/123

7

Legend, thanks Luke :slightly_smiling_face:

8

@Alan_G, unfortunately, I still need help. I’ve successfully retrieved all the data except for quantityAvailable.

Here’s my query:

const response = await query(`
  {
    product(id: "${gid}") {
      title
      variants(first: 10) {
        edges {
          node {
            id
            title
            quantityAvailable
            sku
            price {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }
`);

And here’s the response:

{
    "title": "The Videographer Snowboard",
    "variants": {
        "edges": [
            {
                "node": {
                    "id": "gid://shopify/ProductVariant/44820462862530",
                    "title": "Black",
                    "quantityAvailable": null,
                    "sku": "asd12",
                    "price": {
                        "amount": "885.95",
                        "currencyCode": "PLN"
                    }
                }
            },
            {
                "node": {
                    "id": "gid://shopify/ProductVariant/44820462895298",
                    "title": "Red",
                    "quantityAvailable": null,
                    "sku": "",
                    "price": {
                        "amount": "885.95",
                        "currencyCode": "PLN"
                    }
                }
            }
        ]
    }
}

The issue is that quantityAvailable always returns null.

Here’s the app’s scope:

Screenshot 2025-04-03 at 14.17.37
Screenshot 2025-04-03 at 14.17.37949×570 37.4 KB

Do you have any idea how to fix this? I was thinking about bypassing this by adding a metafield to the product variant to fetch the stock after each update, but maybe there is a better way.

9

Hi all,

I am experiencing the same issue. @lynthius from what I can see, the unauthenticated_read_product_inventory scope isn’t allowed in the checkout usage of the Storefront API scopes, see Storefront API access scopes: Configuration - I suspect this is why you’re getting null from the response.

From my research, the only solution is going to be building an API myself that has access to the Admin API (and therefore inventory numbers for variants), which when fed a list of product variant ids (from my checkout extension), return the variant ids with the inventory count attached.

@Alan_G is there a nicer way to access inventory from the checkout? It seems like a data point that would make sense to expose at the checkout level. :slight_smile:

1 Like
10

Thanks, @Alex_Hooper. I think you’re right. If there’s no better solution, I’ll go ahead and build my own API with Admin API access. I already have some running on GCP, but I was hoping for a simpler way to handle this. :smiley:

Let’s wait for @Alan_G’s response. Perhaps Shopify should consider adding unauthenticated_read_product_inventory to the scope, as it would make implementation much easier. On the other hand, there might be security concerns that justify its exclusion (although it’s strange that I can retrieve other data).

11

Hey all :waving_hand: - thanks for mentioning that @Alex_Hooper - you’re correct there. For Checkout UI extensions specifically, the unauthenticated_read_product_inventory scope isn’t supported (just through the “regular” SF API).

I did some more testing on my end to see if I could share a more elegant way to grab that data, but I do think Alex’s idea to build a separate service that integrates with the extension to grab Admin API data (via inventoryItems/Inventory Levels) would be the best bet.

That said, I’ll raise this a feature request to our team here - can definitely see how this would make things a lot smoother if it could just be actioned within the extension itself.

12

Thanks, folks. It would be great to have direct access to this data within the extension itself in the future.

1 Like