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[]
```

export interface Product {
  id: string
  title: string
  reviewAnalytics: {
    averageRating?: number | null
    reviewCount?: number | null
  }
  shop: ProductShop
  selectedVariant?: ProductVariant
  defaultVariantId: string
  isFavorited: boolean
  variants?: ProductVariant[]
  featuredImage?: ProductImage | null
  price: Money
  compareAtPrice?: Money | null
  referral?: boolean
}

Money

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

export interface 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
```

export interface ProductImage {
  id?: string | null
  altText?: string | null
  url: string
  width?: number | null
  height?: number | null
  /**
   * @deprecated This property will be removed in a future version
   */
  sensitive?: boolean | null
  thumbhash?: string | null
}

ProductVariant

compareAtPrice
```
Money | null
```
id
```
string
```
image
```
ProductImage | null
```
isFavorited
```
boolean
```
price
```
Money
```
title
```
string
```

export interface ProductVariant {
  id: string
  title: string
  isFavorited: boolean
  image?: ProductImage | null
  price: Money
  compareAtPrice?: Money | null
}

ProductShop

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

export interface 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

Default

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?