> ## Documentation Index
> Fetch the complete documentation index at: https://getfaceage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Product recommendations

> Show products from your catalog matched to each shopper's skin concerns, with add to cart.

After the scan, Face Age recommends products from your catalog that match the shopper's detected concerns, with add-to-cart and checkout.

![Recommended products filtered by concern, with the discount code](https://mintcdn.com/getfaceage-com/wLP35CGqBY74yiOL/images/developer-guides/sdk-products.jpg?fit=max\&auto=format\&n=wLP35CGqBY74yiOL\&q=85\&s=350ae9a8fec3f7ca9520aa3df9f43390)

## Show recommendations

```js theme={null}
const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  showProducts: true,
  showAddToCard: true,
  showAddToCardAll: false,
  currency: '$',
});
```

| Option | Type | Default | Description |
| - | - | - | - |
| `showProducts` | `Boolean` | `false` | Show product recommendations after the analysis. |
| `showAddToCard` | `Boolean` | `true` | Show add-to-cart buttons on products. |
| `showAddToCardAll` | `Boolean` | `false` | Show one "add all to cart" button, when the template supports it. |
| `currency` | `String` | `'$'` | Currency symbol shown next to prices. |

> [!NOTE]
>
> The add-to-cart options are spelled `showAddToCard` and `showAddToCardAll` in the SDK.

## Add your products

Products connected in the Face Age dashboard are recommended automatically. To use your own catalog from code, push it with `setCustomProducts` once the analysis is in — the SDK matches products to the detected concerns:

```js theme={null}
faceAge.API.getAdvisorData(() => {
  faceAge.API.setCustomProducts([
    {
      id: 1,
      url: 'https://yourstore.com/product',
      image: 'https://yourstore.com/product.png',
      title: 'Skin Moisturizer',
      description: 'Vitamin C · 30ml',                   // optional
      price: 40,
      offerPrice: 18.99,                                  // optional sale price
      problems: ['acne', 'wrinkles'],                     // optional: target problems
      routineGroups: { morning: ['cleanser', 'serum'] },  // optional
      variables: {                                        // optional: size/variant picker
        size: {
          title: 'Size',
          option: [
            { label: '10 cc', value: '10', price: 40, offerPrice: 18.99 },
            { label: '25 cc', value: '25', price: 52 },
            { label: '35 cc', value: '35' },
          ],
        },
      },
    },
  ]);
});
```

| Field | Required | Description |
| - | - | - |
| `id`, `url`, `image`, `title`, `price` | Yes | Product basics. |
| `description` | No | Short description, for example size or key ingredient. |
| `offerPrice` | No | Sale price. |
| `problems` | No | Concerns the product targets. |
| `routineGroups` | No | Routine steps the product belongs to, by time of day. See [Routines](https://getfaceage.com/docs/developer-guides/personalization/routines.md). |
| `variables` | No | A size or variant picker, each option with its own price. |

## Connect to your cart

```js theme={null}
faceAge.onAddToCart((data) => {
  myCart.add(data); // data contains product details
});

faceAge.onCheckout((data) => {
  window.location.href = '/checkout';
});
```

`onDisplayProducts` and `onClickProduct` also fire as shoppers browse. See [Events](https://getfaceage.com/docs/developer-guides/integrations/events.md).

## Next

> [card] [Personalized routines](https://getfaceage.com/docs/developer-guides/personalization/routines.md)
>
> Morning and night routines built from your catalog.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.