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)

<script
  defer
  data-liquid-commerce-elements
  data-token="YOUR_API_KEY"
  data-env="production"
  data-container-1="product"
  data-product-1="00619947000020"
  type="text/javascript"
  src="https://assets-elements.liquidcommerce.us/all/elements.js"
></script>

<div id="product"></div>

NPM (Programmatic)

npm install @liquidcommerce/elements-sdk

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

// Example: add a product and open cart
await window.elements.actions.cart.addProduct([
  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
], true);

Events (High Level)

Listen for SDK events to drive analytics or custom UI:

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

const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  customTheme: {
    global: {
      theme: {
        primaryColor: '#007bff',
        buttonCornerRadius: '8px'
      }
    }
  }
});

Integrations

Works with any framework. See:

• React
• Next.js
• Vue
• Angular
• Laravel
• Vanilla JS
• Proxy Setup

Documentation (v1)

• Start Here
• Getting Started
• Guides
• API Reference
• Examples
• Reference

Browser Support

Chrome 66+, Firefox 60+, Safari 12+, Edge 79+. See Browser Support for details.

Support

Contact your LiquidCommerce representative for assistance.