How to retrieve current product identifier using Shopify JavaScript API

Other Questions Shopify
1

I’m working on a Shopify app that integrates with an external image processing service. The service needs to know which product a visitor is currently viewing to generate the right images.

My current approach is to modify the product template file to add a hidden element with the product ID, then use JavaScript to read this value for API requests. But I’m wondering if there’s a more elegant solution.

// Current approach - reading from hidden element
const productElement = document.getElementById('hidden-product-id');
const currentProductId = productElement ? productElement.value : null;

if (currentProductId) {
    fetchCustomImages(currentProductId);
}

Is there a better way to access the current product ID directly through JavaScript without modifying theme templates? What’s considered the standard practice for this type of integration?

2

Just inject it server-side into a global variable. Way simpler than overcomplicating it. Add <script>window.currentProductId = {{ product.id }};</script> to your product template and you’re done. No timing issues, no compatibility problems, works everywhere. Sometimes the obvious solution is best.

3

Here’s another approach that works across most Shopify themes - check for the meta.product object that Shopify injects into the page:

const productData = window.meta?.product;
if (productData) {
    const productId = productData.id;
    fetchCustomImages(productId);
}

I’ve used this in several custom apps and it’s way more consistent than ShopifyAnalytics. It’s available earlier in the page load and the meta object usually has other useful stuff like variants and handles.

If that’s not available, just parse the URL. Shopify product URLs follow a predictable pattern, so grab the product handle from the path and use it directly in your API calls. Most external services accept handles instead of numeric IDs anyway.

4

The window.ShopifyAnalytics object has the current product data you need. Here’s how to grab it:

const productId = window.ShopifyAnalytics?.meta?.product?.id;
if (productId) {
    fetchCustomImages(productId);
}

This works on product pages without touching your templates. Just heads up - ShopifyAnalytics isn’t always ready right when the page loads, so you might need to wrap it in a setTimeout or check if it exists first.

You could also pull the product handle from window.location.pathname and hit the Storefront API for the product ID. I’ve done this for custom recommendation widgets and it’s pretty solid across different themes.

5

Both work, but you’ll hit timing issues and browser compatibility problems. Been there with product recommendation systems.

The real problem isn’t grabbing the product ID once - it’s all the edge cases. AJAX navigation breaks it. Mobile browsers cache everything. Themes load inconsistently.

I gave up fighting this stuff and automated the whole thing. Set up a webhook that fires when someone hits a product page. It grabs the product ID, customer data, and whatever else you need, then hits your image service automatically.

No more JavaScript timing headaches or theme quirks. Images get processed in the background and cached for the next person. Way more solid than trying to catch product IDs on the frontend.

Latenode handles Shopify webhooks great and you can build everything visually. Add conditions, transform data, connect services - no coding needed.