How can I retrieve product details using variant id?

Technical Q&A

Topic summary

A developer needs to retrieve product details (title, price, etc.) using a variant ID from a schema, where users select variants via dropdown to dynamically update product information in a frame.

Initial Response:

  • Suggested using JavaScript with .json endpoint (e.g., product-url.json) to fetch product data
  • Provided async function example using fetch API

Clarification & Solutions:

  • Original poster specified needing a Liquid-based solution, not JavaScript
  • After some back-and-forth, a Liquid code snippet was provided that:
    • Loops through all products in a collection
    • Searches for matching variant ID
    • Assigns the found product for use
  • Performance caveat noted: AJAX approach still recommended over Liquid for better performance

Status: Solution provided but involves iterating through entire product catalog, which may have performance implications for large stores. The discussion appears resolved with a working Liquid implementation, though the JavaScript alternative remains the recommended approach.

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

Dear all,

I have a list of variants in schema with their IDs and the user should be able to choose any of those using drop down box so he can dynamically change the product and its variant inside a frame. Now, I have been stucked in finding a way to get product title, price and other details using variant Id listed in the schema. I would really appreciate for any kind of suggestion. Thank you.

2

I’m not sure whether you mean Javascript or Liquid, so I’m assuming it’s javascript.

You can always add a .json at the end of the product page to get the product information. For example, in this product page:

https://row.gymshark.com/products/gymshark-apex-sports-bra-light-teal

You can access the information adding .json at the end:

https://row.gymshark.com/products/gymshark-apex-sports-bra-light-teal.json

Now you just need to make a function to get the data you need. I’d do something like this:

async function _getCurrentProduct() {

        const url = `https://${window.location.host + window.location.pathname}.json`;

        return new Promise(async (resolve, reject) => {

            let response = await fetch(url);

            let {
                product
            } = await response.json();

            resolve(product);
        });
    }
1 Like
3

Thank you for your reply. Actually I was looking for the solution/suggestion in Liquid.

1 Like
4

For liquid just use the documentation:

https://shopify.dev/docs/themes/liquid/reference/objects/product

5

This does not answer the question

6

For a liquid alternative, you can do this. However, I’d still highly recommend using AJAX for the sake of performance:

{% assign variant_id_to_find = 123456789 %}

{% for product in collections.all.products %}
  {% for variant in product.variants %}
    {% if variant.id == variant_id_to_find %}
      {% assign found_product = product %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% if found_product %}
  

Product found: {{ found_product.title }}

{% else %}
  

Product not found

{% endif %}

Best,
Diego