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 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 productVariantId productVariantId string: The GID of the product variant. E.g. gid://shopify/ProductVariant/456. Optional — when omitted, the button opens the native variant selector sheet so the user can pick a variant before adding to cart. Requires product to be set so the button has a productId to act on.
Anchor to size size 'default' | 'sm' | 'lg': Button size variant

Product

compareAtPrice
```
Money | null
```
defaultVariantId
```
string
```
featuredImage
```
ProductImage | null
```
id
```
string
```
isFavorited
```
boolean
```
options
The product's configurable options (e.g. Color, Size). Optional for backwards compatibility with products returned by older Shop app hosts; treat as `[]` when undefined.
```
ProductOption[]
```
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
```

ProductOption

A configurable product option (e.g. Color, Size) and the set of values it accepts across all variants.

id
Globally-unique identifier for the option.
```
string
```
name
The display name of the option. E.g. `Color`.
```
string
```
values
All possible values for the option across variants. E.g. `['Red', 'Blue']`.
```
string[]
```

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
```
selectedOptions
The (name, value) pairs of product options this variant corresponds to. E.g. `[{name: 'Color', value: 'Green'}, {name: 'Size', value: 'M'}]`. Optional for backwards compatibility with variants returned by older Shop app hosts; treat as `[]` when undefined.
```
ProductSelectedOption[]
```
title
```
string
```

ProductSelectedOption

A single (name, value) pair that identifies which value of a product option a variant corresponds to. E.g. `{name: 'Color', value: 'Green'}`.

name
```
string
```
value
```
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?