Skip to main content
This guide walks you through creating a simple product listing with add-to-cart functionality.

​
Step 1: Set Up Your HTML

Create a basic HTML page with the SDK and a container for products: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Store</title>
  <style>
    .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .product { border: 1px solid #ddd; padding: 16px; border-radius: 8px; }
    .product img { width: 100%; height: auto; border-radius: 8px; }
    .price { font-size: 1.25rem; font-weight: bold; color: #7C3AED; }
    .btn { background: #7C3AED; color: white; border: none; padding: 12px 24px;
           border-radius: 6px; cursor: pointer; width: 100%; margin-top: 12px; }
    .btn:hover { background: #6D28D9; }
    .cart-count { position: fixed; top: 20px; right: 20px; background: #7C3AED;
                  color: white; padding: 8px 16px; border-radius: 20px; }
  </style>
</head>
<body>
  <div class="cart-count">Cart: <span id="count">0</span></div>
  <div class="products" id="products"></div>

  <script src="https://cdn.shoppex.io/sdk/v1/shoppex.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

​
Step 2: Initialize and Fetch Products

Create app.js with the following code: 
// Initialize the SDK
shoppex.init('your-store');

// Fetch and display products
async function loadProducts() {
  const { data: products } = await shoppex.getProducts();
  const container = document.getElementById('products');

  products.forEach(product => {
    const card = document.createElement('div');
    card.className = 'product';
    card.innerHTML = `
      <img src="${product.images[0]?.url || '/placeholder.jpg'}" alt="${product.title}">
      <h3>${product.title}</h3>
      <p class="price">${shoppex.formatPrice(product.price, product.currency)}</p>
      <button class="btn" data-id="${product.uniqid}">Add to Cart</button>
    `;
    container.appendChild(card);
  });

  // Add click handlers
  container.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', () => addToCart(btn.dataset.id));
  });
}

loadProducts();

​
Step 3: Add Cart Functionality

Add these functions to handle cart operations: 
function addToCart(productId) {
  // For products without variants, use empty string as variantId
  shoppex.addToCart(productId, '', 1);
  updateCartCount();
}

function updateCartCount() {
  const count = shoppex.getCartItemCount();
  document.getElementById('count').textContent = count;
}

// Initialize cart count on page load
updateCartCount();

​
Step 4: Add Checkout Button

Add a checkout button to your HTML: 
<button class="btn checkout-btn" onclick="goToCheckout()">
  Proceed to Checkout
</button>
And the checkout function: 
async function goToCheckout() {
  const cart = shoppex.getCart();

  if (cart.length === 0) {
    alert('Your cart is empty');
    return;
  }

  // Redirect to Shoppex checkout
  await shoppex.checkout();
}

​
Complete Example

Here’s the full app.js: 
// Initialize SDK
shoppex.init('your-store');

// Load products
async function loadProducts() {
  const { data: products } = await shoppex.getProducts();
  const container = document.getElementById('products');

  products.forEach(product => {
    const card = document.createElement('div');
    card.className = 'product';
    card.innerHTML = `
      <img src="${product.images[0]?.url || '/placeholder.jpg'}" alt="${product.title}">
      <h3>${product.title}</h3>
      <p class="price">${shoppex.formatPrice(product.price, product.currency)}</p>
      <button class="btn" data-id="${product.uniqid}">Add to Cart</button>
    `;
    container.appendChild(card);
  });

  container.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', () => addToCart(btn.dataset.id));
  });
}

// Cart functions
function addToCart(productId) {
  shoppex.addToCart(productId, '', 1);
  updateCartCount();
}

function updateCartCount() {
  document.getElementById('count').textContent = shoppex.getCartItemCount();
}

async function goToCheckout() {
  if (shoppex.getCart().length === 0) {
    alert('Your cart is empty');
    return;
  }
  await shoppex.checkout();
}

// Initialize
loadProducts();
updateCartCount();

​
Next Steps

Store API

Fetch store metadata and branding.

Products API

Advanced product queries and filtering.

Cart API

Complete cart management reference.

Checkout API

Checkout options and coupon handling.