Product

The Product component renders a complete product view with images, pricing, fulfillment options, and add-to-cart.

What you get

• Image carousel

• Name, description, pricing

• Size selection

• Fulfillment type selection (shipping or on-demand)

• Retailer selection (when multiple retailers are available)

• Personalization/engraving (when supported)

• Quantity controls

• Location-based availability and pricing

Add a product (CDN, declarative)

<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>

Add a product (programmatic)

const client = await Elements('YOUR_API_KEY', { env: 'production' });
await client.injectProductElement([
  { containerId: 'product', identifier: '00619947000020' }
]);

Identifiers

Use any of the supported identifiers:

• UPC

• Grouping ID

The SDK resolves the correct product automatically.

Product actions

const product = window.elements.actions.product.getDetails('00619947000020');
console.log(product.name, product.price);

Product events (examples)

window.addEventListener('lce:actions.product_loaded', (event) => {
  const { identifier, name, price } = event.detail.data;
});

window.addEventListener('lce:actions.product_add_to_cart', (event) => {
  const { identifier, quantity, fulfillmentType } = event.detail.data;
});

Address requirement

If an address is required for availability, the SDK automatically prompts the user to set it before adding to cart.