---
title: AddToCartButton
description: >-
  Adds products to Shop's cart with checkmark animation feedback. Users can
  continue shopping and add more items before checkout. Use this for browsing
  experiences where customers might want multiple products. For immediate
  single-product purchases, use `BuyNowButton` instead.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton'
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton.md
---

# Add​To​Cart​Button

Adds products to Shop's cart with checkmark animation feedback. Users can continue shopping and add more items before checkout. Use this for browsing experiences where customers might want multiple products. For immediate single-product purchases, use `BuyNowButton` instead.

## Props

* **productVariantId**

  **string**

  **required**

  The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`

* **className**

  **string**

  CSS class name

* **disabled**

  **boolean**

  Whether the button is disabled

* **discountCodes**

  **string\[]**

  The discount codes to apply to the cart

* **product**

  **Product**

  The product to add to the cart

* **size**

  **'default' | 'sm' | 'lg'**

  Button size variant

### Product

* compareAtPrice

  ```ts
  Money | null
  ```

* defaultVariantId

  ```ts
  string
  ```

* featuredImage

  ```ts
  ProductImage | null
  ```

* id

  ```ts
  string
  ```

* isFavorited

  ```ts
  boolean
  ```

* price

  ```ts
  Money
  ```

* referral

  ```ts
  boolean
  ```

* reviewAnalytics

  ```ts
  { averageRating?: number; reviewCount?: number; }
  ```

* selectedVariant

  ```ts
  ProductVariant
  ```

* shop

  ```ts
  ProductShop
  ```

* title

  ```ts
  string
  ```

* variants

  ```ts
  ProductVariant[]
  ```

### Money

* amount

  ```ts
  Decimal
  ```

* currencyCode

  ```ts
  CurrencyCode
  ```

### Decimal

```ts
string
```

### CurrencyCode

```ts
'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BYR' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JEP' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KID' | 'KMF' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LTL' | 'LVL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STD' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VED' | 'VEF' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'XXX' | 'YER' | 'ZAR' | 'ZMW'
```

### ProductImage

* altText

  ```ts
  string | null
  ```

* height

  ```ts
  number | null
  ```

* id

  ```ts
  string | null
  ```

* sensitive

  ```ts
  boolean | null
  ```

* thumbhash

  ```ts
  string | null
  ```

* url

  ```ts
  string
  ```

* width

  ```ts
  number | null
  ```

### ProductVariant

* compareAtPrice

  ```ts
  Money | null
  ```

* id

  ```ts
  string
  ```

* image

  ```ts
  ProductImage | null
  ```

* isFavorited

  ```ts
  boolean
  ```

* price

  ```ts
  Money
  ```

* title

  ```ts
  string
  ```

### ProductShop

* id

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/shop-minis/AddToCartButton-DURzwURn.png)

### Examples

* #### AddToCartButton

  ##### Default

  ```tsx
  import * as React from 'react'
  import {AddToCartButton, useProduct} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {product, loading} = useProduct({
      id: 'gid://shopify/Product/7234590834753',
    })

    if (loading || !product) {
      return null
    }

    return (
      <AddToCartButton
        product={product}
        productVariantId={product.defaultVariantId}
      />
    )
  }
  ```

  ##### With Discount Codes

  ```tsx
  import * as React from 'react'
  import {AddToCartButton, useProduct} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {product, loading} = useProduct({
      id: 'gid://shopify/Product/7234590834753',
    })

    if (loading || !product) {
      return null
    }

    return (
      <AddToCartButton
        product={product}
        productVariantId={product.defaultVariantId}
        discountCodes={['SUMMER20', 'FREESHIP']}
      />
    )
  }
  ```