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)

Identifiers

Use any of the supported identifiers:

  • UPC

  • Grouping ID

The SDK resolves the correct product automatically.

Product actions

Product events (examples)

Address requirement

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

Last updated