# 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="https://432340635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV9dxncXMEZBpbrUoDlLF%2Fuploads%2FyFSkvoCYXrD5XB2eLIJB%2F360644AC-C51D-4B7C-BC86-6D79925171E4.jpeg?alt=media&#x26;token=10bf8680-a949-4f79-9c1c-bac7f52c8367" alt="Choose a product from your Storefront to have"></div>

![Pick a Product from your storefront that will be used](https://432340635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV9dxncXMEZBpbrUoDlLF%2Fuploads%2FDWGZDgXNXf8jYtkk0EJ2%2F3C06425C-D12E-44CA-9B6B-D881D0063916_1_201_a.jpeg?alt=media\&token=60b536f5-1c58-443d-94c1-3982d5958494)

## 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](https://developer.unstack.com/docs/features/values):

```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