> ## Documentation Index > Fetch the complete documentation index at: https://docs.shoppex.io/llms.txt > Use this file to discover all available pages before exploring further. # Quick Start > Build your first custom headless storefront in 5 minutes This quickstart is for a storefront you host yourself. If you are editing the Shoppex-hosted storefront theme, use [Theme Development](/themes/introduction). Create a basic HTML page with the SDK and a container for products: ```html theme={"system"} My Store
Cart: 0
``` Create `app.js` with the following code: ```javascript theme={"system"} // 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 = ` ${product.title}

${product.title}

${shoppex.formatPrice(product.price, product.currency)}

`; container.appendChild(card); }); // Add click handlers container.querySelectorAll('button').forEach(btn => { btn.addEventListener('click', () => addToCart(btn.dataset.id)); }); } loadProducts(); ``` Add these functions to handle cart operations: ```javascript theme={"system"} 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(); ``` Add a checkout button to your HTML: ```html theme={"system"} ``` And the checkout function: ```javascript theme={"system"} 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`: ```javascript theme={"system"} // 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 = ` ${product.title}

${product.title}

${shoppex.formatPrice(product.price, product.currency)}

`; 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(); ``` For a simple product grid, prefer `product.cdn_image_url`. Save `product.detail_image_url` for product detail pages and galleries. ## Next Steps Fetch store metadata and branding. Advanced product queries and filtering. Complete cart management reference. Checkout options and coupon handling.