Product Details
Display a list of images with animations
Use the ProductDetails
component to present key information about a product to help users understand features, pricing, and options before making a purchase.

<ProductDetails images={[{ src: '/img/product.png', alt: 'main image', width: 250, height: 450 }, { ... }]} title="Product Details" badge={{ text: 'In stock', theme: 'success', icon: 'home' }} rating={{ score: 4 }} price="$99" disclaimer="Add an optional disclaimer text under your CTA for further information." options={[{ name: 'Size', values: ['XS', 'S', 'M', 'L'] }, { name: 'Color', values: ['Red', 'Green', 'Blue'] }]} seller={{ href: '/sellers/john' }}/>
The ProductDetails
component comes with various props that can help you fully customize your product details pages. The only required props for the component are:
images
: Sets a set of images for the product. The gallery is only displayed if there are more than 1 image.title
: Sets a title for the product page.price
: Sets the price of the product.
Customize Ratings
The ratings on your page can be customized with the rating
prop that accepts the same properties as a Rating
component:

<ProductDetails ... rating={{ score: 3, color: "#F7AA61", showEmpty: false, reviewCount: 123, reviewLink: '/product/reviews' }}/>
Quantity
The quantity input can be customized using the quantity prop that can take the following fields:
show
: Whether to show or hide the quantity input. By default, the input is shown.label
: Sets the label of the input field. Defaults to “Quantity”.min
: Sets the minimum possible value, set to 1 by default.max
: Sets the maximum possible value, set to 999 by default.

<ProductDetails ... quantity={{ label: 'Amount:', min: 5, max: 10 }}/>
Options
Additional options can be listed in the sidebar by specifying the options
prop. You can use this to fully customize product selection and let users choose from a variety of options.
---const options = [{ name: 'Size', values: ['XS', 'S', 'M', 'L']}, { name: 'Color', values: ['Red', 'Green', 'Blue']}]---
<ProductDetails ... options={options}/>
The options
prop expects an array of objects in the following format:
name
: Each group must have a name that is used to identify the option.values
: Values must be an array of strings that displays the possible options.
CTA Buttons
The component comes with 3 CTA buttons built-in: “Buy Now” as the main CTA, “Add to Cart” as as secondary CTA, and an “Add to Favorite” button. To customize them you can use the following props:
type ProductDetailsProps = { buyNowButton?: ({ text?: string icon?: string } & ButtonProps) addToCartButton?: ({ show?: boolean text?: string icon?: string } & ButtonProps) showFavoriteButton?: boolean}
All buttons are shown by default. If you need to hide one of them, set the show
attribute to false
. You can find details about ButtonProps
under the Button
component documentation. To customize icons, you can pass an SVG string, or an icon type that is listed in the documentation of our Icon
component.
Callbacks
When the user clicks on one of the buttons, the following events are fired that you can hook into to get access to the select values on the product page:
<script> import { listen } from 'webcoreui'
// eslint-disable-next-line no-console listen('addToCart', event => console.log(event))
// eslint-disable-next-line no-console listen('addToFavorite', event => console.log(event))</script>
<ProductDetails ... onAddToCart={event => console.log(event)} onAddToFavorite={event => console.log(event)}/>
Clicking on the “Favorite” button will report the name of the product, while clicking on the “Add to Cart” button will yield the following information:
type AddToCartCallback = { title: string price: string quantity: number options?: { name: string value: string }[]}
You can customize this behavior in the dispatch
events inside your ProductDetails
component.
Disclaimer and Seller Information
To display further information with the component, you can use the disclaimer
and seller
props:

<ProductDetails ... disclaimer="Add an optional disclaimer text under your CTA..." seller={{ href: '/sellers/john', text: 'Other products by John', }}/>
Note that for the seller information to show up, you must define seller.href
that links to your seller’s page. By default, this will show up as “Seller information” that you can customize through seller.text
. You can also hide the icon by setting seller.showIcon
to false.
Additional Content
You can display additional content with the component by passing child elements. This way, you can easily extend the page and customize your product details in many different ways.
API
type ProductDetailsProps = { images: { src: string alt: string width: number height: number lazy?: boolean }[] title: string badge?: { text: string icon?: string } & BadgeProps rating?: RatingProps, price: string quantity?: { show?: string label?: string min?: number max?: number } buyNowButton?: ({ text?: string icon?: string } & ButtonProps) addToCartButton?: ({ show?: boolean text?: string icon?: string } & ButtonProps) showFavoriteButton?: boolean disclaimer?: string options?: { name: string values: string[] }[] seller?: { text?: string href: string showIcon?: boolean } className?: string sidebarClassName?: string}
type AddToCartCallback = { title: string price: string quantity: number options?: { name: string value: string }[]}
type SvelteProductDetailsProps = { onAddToCart?: (args: AddToCartCallback) => void onAddToFavorite?: (args: string) => void} & ProductDetailsProps
type ReactProductDetailsProps = { onAddToCart?: (args: AddToCartCallback) => void onAddToFavorite?: (args: string) => void} & ProductDetailsProps
Prop | Default | Purpose |
---|---|---|
images | - | Sets the images for the gallery. |
images.src | - | Sets the path for the image. |
images.alt | - | Sets an alternate text for the image. |
images.width | - | Sets the width of the image. |
images.height | - | Sets the height of the image. |
images.lazy | - | Set to true to enable lazy loading for the image. |
title | - | Sets a title for the product. |
badge.text | - | Sets a badge under the title. |
badge.icon | - | Sets an icon for the badge. You can pass an SVG string here or an icon type. |
rating | - | Sets star rating next to the badge. |
price | - | Sets the price of the product. |
quantity.show | true | Set to false to hide the quantity input. |
quantity.label | Quantity | Sets the label for the quantity input. |
quantity.min | 1 | Sets the minimum valid value for the input. |
quantity.max | 999 | Sets the maximum valid value for the input. |
buyNowButton.text | Buy Now | Sets the text for the main CTA. |
buyNowButton.icon | - | Sets an icon for the main CTA. |
addToCartButton.show | true | Set to false to hide the secondary CTA. |
addToCartButton.text | Add to cart | Sets the text of the secondary CTA. |
addToCartButton.icon | - | Sets an icon for the secondary CTA. |
showFavoriteButton | true | Show a favorite button next to the secondary CTA. |
disclaimer | - | Display additional text under the CTA buttons. |
options.name | - | Sets a name for an option group. |
options.values | [] | Pass an array of strings to set options for the group. |
seller.text | - | Sets the text for seller information. |
seller.showIcon | true | Set to false to hide icon for seller information. |
seller.href | - | Sets a link for the seller. |
className | - | Pass additional CSS classes for the component. |
sidebarClassName | - | Pass additional CSS classes for the sidebar, next to the gallery and main content. |
Svelte & React Prop | Purpose |
---|---|
onAddToCart | Callback function that runs when the "Add to Cart" button is clicked. |
onAddToFavorite | Callback function that runs when the favorite button is clicked. |