How to configure “Add to cart” native button

Overview

The Add to Cart CTA allows you to:

• Display a native “Add to cart” button inside the VTO

• Provide a direct transition from try-on to purchase flow

• Track user interactions related to add-to-cart intent

The CTA is hidden by default and must be explicitly enabled.

Activation

To display the CTA, enable it in the VTO configuration:

• Add the onShowAddToCartButton callback to the parameters

When enabled, the CTA is displayed in the bottom-right corner of the camera/viewer/photo flow once the VTO is started.

Configuration

The CTA can be configured through the VTO integration code.

{
  "addToCartSettings": {
    "addToCartButtonLabel": "string",
    "addToCartButtonIcon": "string",
  }
  onShowAddToCartButton?: (data: { frameId?: string; material?: string }) => void;
}

UI customization

Default behavior

If onShowAddToCartButtonis included and no customization is provided:

• The CTA is displayed with the default style defined in the VTO UI specifications.

• The default label uses the translations to “Add to cart”

Custom label

You may override the default label:
"addToCartButtonLabel": "Modified text"

Behavior:

• The provided text replaces the default label.

• If customized, the text is not translated.

• The integrator is responsible for providing localized values if needed.

Custom icon

You may override the default icon:
"addToCartButtonIcon": "url"

• The provided icon URL is used inside the CTA.

• The integrator is responsible for providing a valid and accessible asset.

• If the file format is invalid or unsupported, the icon is rendered as interpreted by the browser.

Icon format and size requirements must follow the design specifications.

Advanced styling

Further visual customization can be achieved through CSS overrides on the host page. This allows deeper integration into the client’s design system.

Click behavior configuration

The functional behavior of the CTA is fully controlled by the integrator.

When the user clicks the button:

• The callback onShowAddToCartButton  is triggered.

• The active frame ID is transmitted.

• The applied lens ID is transmitted, if a lens has been selected.

The integrator must implement the callback logic to:

• Add the product to cart

• Redirect to a product page

• Open a cart drawer

• Or trigger any other purchase flow

Example

Follow this codepen example !