Unstack Dev Docs
Search…
Product
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.
1
<Product
2
dataRef={content.product}
3
item={(product) => (
4
<ProductInventory product={product} />
5
<ProductPrice product={product} />
6
<ProductOptions dataRef={product.options} product={product} />
7
<Media
8
dataRef={product.media[0]}
9
layout="normal"
10
category="image"
11
className="media swiper-slide"
12
readOnly={true}
13
/>
14
)}
15
/>
Copied!
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.
Choose a product from your Storefront to have
Pick a Product from your storefront that will be used

Product Tag Props:

  • dataRef: DataLocator - the data-element storing the Generator's configuration
  • item: anonymous arrow function - used to create a collection item
Copy link