Product

Description

The product variable provides details about the collection on a Product Detail (PDP) page. It includes the collection’s ID, title, handle, description, and main image. The collection object is only available on PDP pages; outside of a PDP context, it is null.

Properties of Product

Properties of variants

Usage Example

const product_data = Superfans.variables.product;

if (product_data) {
  // Display basic product info
  console.log(`Product: ${product.title} — ${product.price}`);

  // Show options (e.g. color, size)
  product.options?.forEach((opt) => {
    console.log(`Option: ${opt.name} = ${opt.value}`);
  });

  // Access the selected variant
  const selected_variant = product.selectedVariant;
  if (selected_variant) {
    console.log(`Selected variant SKU: ${variant.sku}`);
    console.log(`Variant price: ${variant.price}`);
  }
} else {
  // The product object is only available on PDPs
  console.log("Not on a product page.");
}

Best Practices

1. PDP only: The product variable is defined only on product detail pages; always check for null when using it elsewhere.
2. Listen for variant changes: Use the Variant Change listener to update UI elements (price, images, inventory) when a user selects a different variant.
3. Use selectedVariant for accuracy: Display price, availability and SKU based on product.selectedVariant rather than the first variant by default.
4. Handle optional fields gracefully: Fields like compareAtPrice, tags, metafields and sellingPlanId may be absent; guard against undefined values.
5. Read‑only data: Do not attempt to modify properties of the product or its variants; they reflect Shopify data and cannot be edited from the client side.

Caveats

1. Scope limited to PDP: The product variable returns null on any page that is not a product detail page
2. Incomplete or missing fields: Not all products have tags, compare‑at prices, metafields or images; always check for existence before using these fields.
3. Variant data types: Variant properties such as title, image, price, and compareAtPrice are strings/floats, not Booleans, even though the original table lists them incorrectly. Adjust your code accordingly.
4. Selected variant availability: The selectedVariant may be null until a user selects an option; handle this case when displaying variant‑dependent information.