---
title: useSavedProductsActions
description: >-
  The useSavedProductsActions hook provides mutation functions to save and
  unsave products (favorites).
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/user/usesavedproductsactions'
  md: >-
    https://shopify.dev/docs/api/shop-minis/hooks/user/usesavedproductsactions.md
---

# useSavedProductsActions

The `useSavedProductsActions` hook provides mutation functions to save and unsave products (favorites). Returns `saveProduct()` and `unsaveProduct()` functions that accept product IDs and variant information. Saving a product adds it to the user's products collection in the Shop app. Use with `useSavedProducts()` to display current saved status and implement optimistic UI updates.

**Caution:**

This hook requires adding the following scopes to the manifest file:

`product_list:write`

For more details, see [manifest.json](https://shopify.dev/docs/api/shop-minis/manifest-file).

## use​Saved​Products​Actions()

### Returns

* **UseSavedProductsActionsReturns**

### UseSavedProductsActionsReturns

* saveProduct

  Save a product.

  ```ts
  (params: FavoriteParams) => Promise<void>
  ```

* unsaveProduct

  Unsave a product.

  ```ts
  (params: UnfavoriteParams) => Promise<void>
  ```

### FavoriteParams

* productId

  ```ts
  string
  ```

* productVariantId

  ```ts
  string
  ```

* shopId

  ```ts
  string
  ```

### UnfavoriteParams

* productId

  ```ts
  string
  ```

* productVariantId

  ```ts
  string
  ```

* shopId

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import {useSavedProductsActions, Button} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {saveProduct, unsaveProduct} = useSavedProductsActions()

    return (
      <>
        <Button
          onClick={() =>
            saveProduct({
              productId: 'gid://shopify/Product/123',
              productVariantId: 'gid://shopify/ProductVariant/456',
              shopId: 'gid://shopify/Shop/42',
            })
          }
        >
          Save product
        </Button>
        <Button
          onClick={() =>
            unsaveProduct({
              productId: 'gid://shopify/Product/123',
              productVariantId: 'gid://shopify/ProductVariant/456',
              shopId: 'gid://shopify/Shop/42',
            })
          }
        >
          Unsave product
        </Button>
      </>
    )
  }
  ```

***