# Product

{% hint style="info" %}
This tag is only available on **eCommerce** plans.
{% endhint %}

The Product generator allows you to access elements of a product in your storefront. This allows you to display details on the products inventory, price range, variants, and media associated with the product.

```jsx
<Product
  dataRef={content.product}
  item={(product) => (
    <ProductInventory product={product} />
    <ProductPrice product={product} />
    <ProductOptions dataRef={product.options} product={product} />
    <Media
      dataRef={product.media[0]}
      category="image"
      readOnly={true}
    />
  )}
/>
```

When Product is added, a new button will be added to the top right corner of the component that allows you to pick a product from your storefront as shown below.

<div align="left"><img src="/files/UQtj80nOoZcvkDxa32zR" alt="Choose a product from your Storefront to have"></div>

![Pick a Product from your storefront that will be used](/files/bBwFc0p1V67QkYfG70Zz)

## Product extensions

If you're using Elastic Path, you can add additional fields to your product data with [Product Extensions](https://elasticpath.dev/docs/pxm/products/extending-pxm-products/add-custom-data-to-pxm-products). Product Extensions are a great way to add additional data to products.

To access Product Extensions within the product tag on the `product.attributes.extensions` [variable](/docs/features/values.md):

```jsx
<Product
  dataRef={content.product}
  item={(product) => (
    <div>{product.attributes.extensions['template-name']['attribute-name']}
  )
/>
```

The same information can be accessed from the JavaScript associated with the component. For example:

```javascript
this.init(function(section) {
  var products = _shop._products
  var container = section.node.querySelector('[data-product]')
  var productId = container.dataset.product
  var product = products[productId]
  
  // Product Extensions
  product._data.attributes.extensions['template-name']['attribute-name']
})
```

If you're curious about the other data associated with a products, we encourage you to explore it your web browser:

1. Open any published page that has products embedded it
2. Open the [developer tools console](https://blog.teamtreehouse.com/mastering-developer-tools-console)
3. Type `_shop._products`
4. Expand the array to view product data

## Attributes

* **dataRef**: DataLocator - the data-element storing the Generator's configuration
* **item**: anonymous [arrow function](https://www.w3schools.com/js/js_arrow_function.asp) - used to create a collection item


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.unstack.com/docs/e-commerce/product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.