Get Product

Description

The getProduct helper retrieves detailed information about a specific Shopify product without making a direct API call. It provides the same data structure as the product variable on the PDP, including variants, options, images, and pricing information.

Function Signature

Superfans.helpers.getProduct({
		productId: "8188148547769" //ID of the product from Shopify
})
  .then((product) => console.log(product))
  .catch((err) => console.log(error)
)
		
																				(OR)
Superfans.helpers.getProduct({
		productHandle: "men-shirt" //Handle of the product from Shopify
})
.then((product) => console.log(product))
  .catch((err) => console.log(error))

Structure of Response

Usage Example

Superfans.helpers.getProduct({ productId: "8188148547769" })
    .then((product) => {
        document.getElementById("clc").innerHTML = JSON.stringify(product);
        // Do the required functionality

    })
    .error((err) => {
        document.getElementById("clc").innerHTML = "Error"
    });

Best Practices

1. Use handle for readability: When possible, use the product handle (slug) for cleaner references.
2. Cache results: For commonly used products (like upsells), store the result to avoid repeated calls.
3. Error handling: Gracefully handle missing or unpublished products with fallback messaging.

Caveats

1. Requires product context: The helper can only return products available in your Shopify store. Make sure it is made available for
2. Data freshness: Cached data may delay a few seconds behind Shopify’s real-time updates.
3. Limited metafields: Not all product metafields are returned by this helper.
4. Null response: If the product is not found, the returned value will be null.