# Add to cart from product cards

Add a chosen product variant to the shopper's own Shopify or BigCommerce basket from a product card.

*Release 3.3 · developer, visitor*

**Settings › Commerce › Product Cards** · **Settings › Commerce › Commerce Providers**

## What it is

**Add to cart** lets a visitor add a chosen product to their store basket from a chat product card. The addition uses the shopper's existing storefront session. It does not place an order or complete checkout.

## Who uses it and why

- Visitors choose the product options and confirm an addition without leaving chat.
- Developers connect the storefront experience and refresh basket indicators after successful additions.

## Where to find it

Visitors use **Add to cart** on supported product cards. Its visible text can follow the card's action labels and language.

Users with the **Settings** role select quantity presentation in **Settings › Commerce › Product Cards**. Users with the **Settings** or **Developer** role configure the store connection in **Settings › Commerce › Commerce Providers**.

## How it works

1. Open the card on the matching store's website.
2. Choose the required variant options and quantity, when offered.
3. Confirm **Add to cart**. Choosing the last option alone does not submit the addition.
4. Wait for confirmation from the store before treating the addition as successful.

Shopify adds the variant using the store's localised shopping context. BigCommerce adds to the existing basket or creates one when none exists. If BigCommerce returns several baskets, INSIDE stops rather than choosing one.

Developers can listen for `inside:commerce-cart-updated` on the host page to refresh a basket count or drawer. The event is sent after a confirmed addition and includes the provider, product, variant and quantity. INSIDE does not assume that the storefront has a particular basket drawer.

## Configure it

Use a provider that supplies a supported basket action and valid product and variant information. Embed chat on the corresponding storefront so the addition uses that shopper's session.

Ask a colleague with the **Settings** role to choose whether **Quantity** is hidden, in the options popup or on the card. Hidden quantity normally adds one, subject to the product's quantity restrictions. Check the storefront's basket refresh behaviour after a successful addition.

## Limits and good to know

- Quantity must be a whole number from 1 to 99 and satisfy any stricter product minimum, maximum or increment.
- The action needs a valid variant and matching storefront. Shopify also recognises its configured shop domain on the current storefront.
- A second addition cannot start while one is in progress. Failed additions are not retried automatically.
- Products requiring unsupported modifiers or selling plans may offer a product link instead of integrated addition.
- Basket tracking is separate. Receiving a tracked basket update does not prove that an addition succeeded.

## Depends on and works with

### This feature uses

- **Requires** [Product card configuration and shopping actions](COM-014.md): Product cards provide the choices and explicit shopping action.
- **Requires** [Visitor chat pane](VX-002.md): The embedded chat communicates with the current storefront page.
- **Requires** [Product cards in visitor chat](VX-019.md): The visitor's product controls dispatch the confirmed action.
- **Works better with** [Shopify commerce connection](COM-002.md): Shopify supports additions in the shopper's storefront session.
- **Works better with** [BigCommerce store connection](COM-004.md): BigCommerce supports finding or creating the shopper's basket and adding a line.
- **Works better with** [Product options and variant selection](COM-008.md): Option selection lets shoppers add products that need a specific size, colour or other variant.

### Used by

- **Enhances** [Product cards in visitor chat](VX-019.md): Supported storefront integrations provide basket actions.
- **Enhances** [Shopify commerce connection](COM-002.md): Eligible product variants can use the shopper's storefront basket.
- **Enhances** [BigCommerce store connection](COM-004.md): Eligible products can be added to the shopper's own storefront basket.
- **Enhances** [Product options and variant selection](COM-008.md): A supported storefront action adds the selected available variant to the shopper's basket.
- **Enhances** [Store product selection for chat](COM-009.md): Supported visitor basket actions are retained when cards are prepared for sending.
- **Enhances** [Product card configuration and shopping actions](COM-014.md): Supported storefront actions add the selected variant to the visitor's basket.
- **Enhances** [Product recommendation and purchase reports](REP-009.md): Visitor basket actions supply Add to Cart click measures.

## FAQ and troubleshooting

### Why am I asked to open the store's website?

The addition must run in the matching storefront session. Open the product link and continue on that store.

### Why is the action unavailable after I choose options?

The chosen variant may be unavailable, incomplete or require purchase options the integrated action does not support. Continue through the product page.

### Why did my basket counter not change?

Check the store basket itself. Developers may need to refresh the counter or drawer when the cart-updated event arrives.

### Can the action check out for me?

No. Continue to the store's basket and checkout after adding the product.