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

Shopify Apps

Topic summary

A developer seeks to access product variant data (specifically quantity and selling plan information) on home and collection pages, outside the standard product page context.

Current challenges:

  • The standard .json product endpoint lacks needed quantity and selling plan values
  • Wants to avoid creating custom client-to-server proxy requests due to potential high request volume

Exploring Storefront API solution with questions:

  • Unclear if publicAccessToken expires
  • Uncertain how to obtain buyer’s IP for the “Shopify-Storefront-Buyer-IP” parameter (documentation requires it, but client.request doesn’t accept it)
  • Needs clarification on API rate limits and potential GraphQL throttle errors

Use case: Display conditional UI elements on home/collection pages based on variant quantity thresholds and selling plans.

One respondent suggests using Shopify’s REST API endpoints to fetch variant information directly from Shopify’s servers, though specific implementation details remain under discussion.

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

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;
      }
    })();
  }, []);
2

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.

3

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.

4

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