# Defaults: ProductHighlights (/themes/sdk/reference/product/defaults-6)

```ts
import { … } from '@poltura/theme-sdk/product';
```

## `ProductHighlights` [#producthighlights]

The merchant's highlighted selling points as a two-column list with chevrons; nothing without any.

```ts
ProductHighlights(props: ProductHighlightsProps): ReactElement | null
```

**Props:** [`ProductHighlightsProps`](/themes/sdk/reference/product/types-7#producthighlightsprops)

<Tab value='Example'>

```tsx
import { ProductHighlights } from '@poltura/theme-sdk/product';

export function SellingPoints() {
  return <ProductHighlights />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/product-highlights.tsx"
import type { ReactElement } from 'react';
import { ChevronRight } from 'lucide-react';
import { useOptionalProductPage, type ProductHighlightsProps } from '@poltura/theme-sdk/product';
import { cn } from '@poltura/theme-sdk/ui';

export function ProductHighlights({ className }: ProductHighlightsProps): ReactElement | null {
  const page = useOptionalProductPage();
  const items = page?.highlights ?? [];
  if (items.length === 0) return null;
  return (
    <ul className={cn('grid grid-cols-1 gap-x-6 gap-y-2 sm:pt-4 sm:grid-cols-2', className)}>
      {items.map((item, index) => (
        <li key={`${index}-${item}`} className='flex items-center gap-2.5'>
          <ChevronRight className='h-4 w-4 shrink-0 text-muted-foreground/60' />
          <span className='text-sm text-muted-foreground'>{item}</span>
        </li>
      ))}
    </ul>
  );
}
```

</Tab>


**See also:** [`useProductPage`](/themes/sdk/reference/product/hooks-2#useproductpage)