Elements SDK
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://www.typescriptlang.org/)
[](./package.json)
[](./docs/v1/reference/browser-support.md)
**Add product displays, shopping carts, and checkout flows to any website**
---
## Overview
Elements SDK is a Web Components-based e-commerce SDK that lets you add product displays, a cart, and checkout to any site with minimal code. It’s framework-agnostic, fully themeable, and works via CDN or NPM.
## What You Can Build
- Product pages with variants, fulfillment options, and add-to-cart
- Cart drawer with promo codes and totals
- Checkout drawer or hosted checkout page
- Multi-product grids and searchable lists
- Address capture for delivery availability and pricing
## Installation
### CDN (Fastest)
```html
```
### NPM (Programmatic)
```bash
npm install @liquidcommerce/elements-sdk
```
```javascript
import { Elements } from '@liquidcommerce/elements-sdk';
const client = await Elements('YOUR_API_KEY', { env: 'production' });
await client.injectProductElement([
{ containerId: 'product', identifier: '00619947000020' }
]);
```
## Core Concepts (Short)
- **Web Components + Shadow DOM** for framework-agnostic UI and style isolation
- **Declarative setup** via HTML data attributes
- **Programmatic setup** via `Elements()` client for dynamic injection
- **Events** for analytics and custom UI
- **Actions API** for cart/checkout control
## Components
- **Product**: Images, variants, fulfillment, add-to-cart
- **Cart**: Drawer with items, totals, promo codes
- **Checkout**: Drawer or hosted page with full purchase flow
- **Address**: Delivery location capture
- **Product List**: Filterable, searchable grids
## Key Methods (High Level)
- `injectProductElement`, `injectCartElement`, `injectCheckoutElement`, `injectAddressElement`
- `ui.cartButton`, `ui.floatingCartButton`, `ui.cartSubtotal`, `ui.cartItemsCount`
- `actions.product`, `actions.cart`, `actions.checkout`, `actions.address`
```javascript
// Example: add a product and open cart
await window.LiquidCommerce.elements.actions.cart.addProduct([
{ identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
], true);
```
## Events (High Level)
Listen for SDK events to drive analytics or custom UI:
```javascript
window.addEventListener('lce:actions.product_loaded', (event) => {
console.log('Loaded:', event.detail.data.identifier);
});
window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
console.log('Order:', event.detail.data.orderId);
});
```
## Theming
```javascript
const client = await Elements('YOUR_API_KEY', {
env: 'production',
customTheme: {
global: {
theme: {
primaryColor: '#007bff',
buttonCornerRadius: '8px'
}
}
}
});
```
## Integrations
Works with any framework. See:
- [React](./docs/v1/integration/react.md)
- [Next.js](./docs/v1/integration/nextjs.md)
- [Vue](./docs/v1/integration/vue.md)
- [Angular](./docs/v1/integration/angular.md)
- [Laravel](./docs/v1/integration/laravel.md)
- [Vanilla JS](./docs/v1/integration/vanilla-js.md)
- [Proxy Setup](./docs/v1/integration/proxy-setup.md)
## Documentation (v1)
- [Start Here](./docs/v1/README.md)
- [Getting Started](./docs/v1/getting-started/installation.md)
- [Guides](./docs/v1/guides/)
- [API Reference](./docs/v1/api/)
- [Examples](./docs/v1/examples/)
- [Reference](./docs/v1/reference/)
## Browser Support
Chrome 66+, Firefox 60+, Safari 12+, Edge 79+.
See [Browser Support](./docs/v1/reference/browser-support.md) for details.
## Support
Contact your LiquidCommerce representative for assistance.