How to access product variant data on home, collection pages?

Hello,

I want to access product variant data by handle and variant ID, but not from the product page. Currently, I’m looking for a solution on how to do this.

  1. https://store.myshopify.com/products/the-complete-snowboard.json does not work for me because I need the quantity and selling plans values;

  2. I do not want to create a custom API request from client-side to server-side using proxy. It can be a lot of requests to the server;

  3. The last solution which I’m trying investigate more, but I cannot find enough information, is https://shopify.dev/docs/api/storefront :

My code:

  useEffect(() => {
    (async function () {
      const client = createStorefrontApiClient({
        storeDomain: "https://my.myshopify.com",
        apiVersion: "2025-01",
        publicAccessToken: "123456",
        retries: 3,
      });

      const productQuery = `
        query ProductQuery($handle: String!) {
          product(handle: $handle) {
            id
          }
        }
      `;

      try {
        const { data } = await client.request(productQuery, {
          variables: {
            handle: "product-handle",
          },
        });
      } catch (e) {
        throw e;
      }
    })();
  }, []);

My experience with this is through the rest api. You can send api request to the server with product handle or variant id to get the variant information and display the details accordingly using html, css, js.

It would be great if you could like share examples of what you actually need to achieve.

To the server, do you mean your own server?

I want to show extra UI on home, collection pages related with product variant quantity and selling plan. I need to add condition if quantity is more than X, etc.

No, I am talking about using the Shopify servers or backend using rest api endpoints provided by shopify