> For the complete documentation index, see [llms.txt](https://developer.unstack.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.unstack.com/docs/e-commerce/product.md).

# 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