AddToCartButton

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.

Anchor to propsProps

Anchor to productVariantId productVariantId string required: The GID of the product variant. E.g. gid://shopify/ProductVariant/456
Anchor to className className string: CSS class name
Anchor to disabled disabled boolean: Whether the button is disabled
Anchor to discountCodes discountCodes string[]: The discount codes to apply to the cart
Anchor to product product: The product to add to the cart
Anchor to size size 'default' | 'sm' | 'lg': Button size variant

Product

compareAtPrice
```
Money | null
```
defaultVariantId
```
string
```
featuredImage
```
ProductImage | null
```
id
```
string
```
isFavorited
```
boolean
```
price
```
Money
```
referral
```
boolean
```

reviewAnalytics

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

selectedVariant
```
ProductVariant
```
shop
```
ProductShop
```
title
```
string
```
variants
```
ProductVariant[]
```

Money

amount
```
Decimal
```
currencyCode
```
CurrencyCode
```

Decimal

string

CurrencyCode

'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
```
string | null
```
height
```
number | null
```
id
```
string | null
```
sensitive
```
boolean | null
```
thumbhash
```
string | null
```
url
```
string
```
width
```
number | null
```

ProductVariant

availableForSale
Whether the variant can be purchased. When `false`, calls to add the variant to cart or buy it through the SDK will fail. UI should be gated on this flag. May be `undefined` if the variant was sourced from an API that does not expose stock state.
```
boolean
```
compareAtPrice
```
Money | null
```
id
```
string
```
image
```
ProductImage | null
```
isFavorited
```
boolean
```
price
```
Money
```
title
```
string
```

ProductShop

id
```
string
```
name
```
string
```

Examples

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}

)

}

Preview

Examples

AddToCartButton

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

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']}
    />
  )
}

Was this page helpful?