Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-add-to-cart>

The add-to-cart button for a product card. Smart variant handling: when the product has un-picked variants, the button text + style switches to the variant mode (e.g. "See options") and clicks navigate to the PDP. When a variant is selected, the button calls the cart SDK directly and dispatches commmerce:cart-updated on window.

Overview

Two visual states with independent styling:

  • Add-to-cart mode — variant is picked (or product has no variants). Uses the button-* attributes.
  • See-variants mode — product has variants and none picked. Uses the variant-button-* attributes and navigates to the PDP.

Both modes inherit defaults from the theme's addToCartButton palette so you only need overrides when departing from the global theme.

When to use

  • Inside every <mmm-product-card> as the primary CTA.
  • For "quick add" UX on category grids.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-product-card data-product='{"slug":"classic-tee","price":29}'>
  <mmm-product-add-to-cart button-text="Add to bag"></mmm-product-add-to-cart>
</mmm-product-card>

Attributes

14 attributes per mode (28 total). Each button-* has a matching variant-button-* for the see-options state.

AttributeTypeDefaultDescription
button-textstringAdd to CartLabel in add-to-cart mode.
variant-button-textstringSee variantsLabel in see-options mode.
button-backgroundstringtheme add-to-cart fill / #000Add-to-cart background.
button-colorstringtheme add-to-cart text / #fffAdd-to-cart text colour.
button-borderstringtheme add-to-cart stroke / transparentAdd-to-cart border.
button-hover-backgroundstringtheme add-to-cart hover fill / #333Add-to-cart hover background.
button-hover-colorstringtheme add-to-cart hover text / #fffAdd-to-cart hover text colour.
button-hover-borderstringtheme add-to-cart hover stroke / transparentAdd-to-cart hover border.
button-paddingstring0.625rem 1remAdd-to-cart padding.
button-border-radiusstring0.25remAdd-to-cart border-radius.
button-font-familystringtheme add-to-cart font / inheritAdd-to-cart font-family.
button-font-sizestring0.875remAdd-to-cart font-size.
button-font-weightstring600Add-to-cart font-weight.
button-letter-spacingstringnormalAdd-to-cart letter-spacing.
button-text-transformstringnoneAdd-to-cart text-transform.
variant-button-backgroundstringtheme button normal fillSee-variants background.
variant-button-colorstringtheme button normal textSee-variants text colour.
variant-button-borderstringtheme button normal strokeSee-variants border.
variant-button-hover-backgroundstringtheme button hover fillSee-variants hover background.
variant-button-hover-colorstringtheme button hover textSee-variants hover text.
variant-button-hover-borderstringtheme button hover strokeSee-variants hover border.
variant-button-font-familystringtheme description fontSee-variants font-family.
variant-button-font-sizestring0.875remSee-variants font-size.
variant-button-font-weightstring500See-variants font-weight.
variant-button-letter-spacingstringnormalSee-variants letter-spacing.
variant-button-text-transformstringnoneSee-variants text-transform.
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.
stylestring—Inline style on the host element.

Events

EventTargetPayload
commmerce:cart-updatedwindow{ items: number, cart: Cart, action: 'add' | 'increment' | 'decrement' }

Fires after a successful SDK call to add or update the cart. <mmm-header-cart> and other components listen for this to refresh their badges.

Live preview

store sample-store tag <mmm-product-add-to-cart>

Examples

1. Default — theme-driven

<mmm-product-add-to-cart></mmm-product-add-to-cart>

2. Pill-style add button, ghost variant button

<mmm-product-add-to-cart
  button-text="Add to bag"
  variant-button-text="Choose variant"
  button-background="#0e1011"
  button-color="#fff"
  button-border-radius="999px"
  variant-button-background="transparent"
  variant-button-color="#0e1011"
  variant-button-border="1px solid #0e1011"
  variant-button-border-radius="999px">
</mmm-product-add-to-cart>

3. Listen for cart updates

window.addEventListener('commmerce:cart-updated', (e) => {
  console.log('Cart now has', e.detail.items, 'items');
  console.log('Action:', e.detail.action);
});