This quickstart is for a storefront you host yourself. If you are editing the
Shoppex-hosted storefront theme, use Theme Development.
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.0/shoppex.umd.js"></script>
<script src="app.js"></script>
</body>
</html>
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.cdn_image_url || 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();
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();
4
Add Checkout Button
Add a checkout button to your HTML:And the checkout function:
<button class="btn checkout-btn" onclick="goToCheckout()">
Proceed to Checkout
</button>
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 fullapp.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.cdn_image_url || 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();
For a simple product grid, prefer
product.cdn_image_url. Save product.detail_image_url for product detail pages and galleries.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.