# Quick Start
Get a product display with add-to-cart functionality working on your page in under 5 minutes.
## What You'll Build
A fully functional product page with:
- Product images and details
- Size selection
- Fulfillment options (shipping/on-demand delivery)
- Add to cart button
- Shopping cart drawer
- Complete checkout flow
## Prerequisites
- A LiquidCommerce API key (contact your LiquidCommerce representative)
- A product identifier
- A web page or HTML file
## Step 1: Add the SDK Script
Add the Elements SDK script tag to your HTML ``:
```html
My Product Page
```
**Replace `YOUR_API_KEY`** with your actual API key.
## Step 2: Add a Product Container
Create a container where the product will be displayed:
```html
Our Premium Whiskey
```
## Step 3: Configure the Product (Declarative)
Add product configuration using HTML data attributes on the script tag:
```html
```
**New attributes:**
- `data-container-1="product-display"` - Points to the container ID
- `data-product-1="00619947000020"` - The product identifier
The numbers (1) connect the container to its product. For multiple products, increment the number:
- `data-container-2` with `data-product-2`
- `data-container-3` with `data-product-3`
- etc.
## Complete Example
Here's the complete HTML for a working product page:
```html
Premium Whiskey - Buy Online
Our Premium Whiskey
```
That's it! Save the file and open it in a browser. You should see:
1. Product images in a carousel
2. Product name and description
3. Size selector
4. Fulfillment type selector (shipping/delivery)
5. Retailer selection
6. Add to cart button
When you click "Add to Cart," a cart drawer slides in from the right with checkout functionality.
## Alternative: Programmatic Setup
If you prefer JavaScript over HTML attributes:
```html
My Product Page
Our Premium Whiskey
```
Or with NPM:
```javascript
import { Elements } from '@liquidcommerce/elements-sdk';
async function initProduct() {
const client = await Elements('YOUR_API_KEY', {
env: 'production'
});
await client.injectProductElement([
{
containerId: 'product-display',
identifier: '00619947000020'
}
]);
}
initProduct();
```
## Multiple Products
To display multiple products on one page:
```html
```
Or programmatically:
```javascript
await client.injectProductElement([
{ containerId: 'product-1', identifier: '00619947000020' },
{ containerId: 'product-2', identifier: '08504405135' },
{ containerId: 'product-3', identifier: '08068660001' }
]);
```
## What Happens Automatically
The SDK handles everything for you:
1. **Address Collection** - If needed, prompts for delivery location
2. **Availability Check** - Shows only available fulfillment options
3. **Cart Management** - Maintains cart across page refreshes and tabs
4. **Checkout Flow** - Complete payment and order processing
5. **Error Handling** - Graceful error messages and recovery
6. **Mobile Responsiveness** - Works on all screen sizes
## Customization
Want to customize the look, visit the Elements Builder in our [Partner Portal](https://app.liquidcommerce.co/)? Want to manually override your theme, you can pass a `customTheme: IClientCustomThemeConfig` configuration:
```html
```
Or with NPM:
```javascript
const client = await Elements('YOUR_API_KEY', {
env: 'production',
customTheme: {
global: {
theme: {
primaryColor: '#007bff',
buttonCornerRadius: '8px',
headingFont: {
name: 'Poppins',
weights: [400, 600]
}
}
}
}
});
```
## Testing Different Products
To test with different products, simply change the product identifier:
```html
data-product-1="YOUR_PRODUCT_IDENTIFIER"
```
Contact your LiquidCommerce representative for available product identifiers.
## Troubleshooting
### Product Not Showing
1. **Check the browser console** for errors
2. **Verify your API key** is correct
3. **Confirm the product identifier** exists in your catalog
4. **Check the container ID** matches your HTML
### Styling Issues
The product uses Shadow DOM for style encapsulation. To customize:
- Use the `customTheme` configuration option
- See [Theming Guide](../guides/theming.md) for detailed customization
### Cart Not Opening
The cart should open automatically after adding a product. If it doesn't:
1. Check browser console for JavaScript errors
2. Verify no other scripts are conflicting
3. Try manually opening: `window.LiquidCommerce.elements.actions.cart.openCart()`
## Next Steps
Now that you have a basic product working:
- **[Core Concepts](./concepts.md)** - Understand how the SDK works
- **[Product Component Guide](../guides/product-component.md)** - Deep dive into product features
- **[Cart Component Guide](../guides/cart-component.md)** - Learn about cart functionality
- **[Checkout Component Guide](../guides/checkout-component.md)** - Customize the checkout experience
- **[Theming Guide](../guides/theming.md)** - Make it match your brand
- **[Events](../guides/events.md)** - React to user actions
- **[API Reference](../api/client.md)** - Explore all available methods
## Complete Working Example
Try this complete example with your API key:
```html
Whiskey Shop
```
Replace `YOUR_API_KEY` with your actual key and you're ready to go!