Building a custom storefront used to mean wrestling with bloated CMS platforms, endless plugin updates, and API rate limits that make you want to pull your hair out. If you're building a unique frontend—whether it's a sleek mobile app, a heavily animated landing page, or a Next.js masterpiece—you just want your product data fast, clean, and out of your way.

Enter Byserva—a lightweight, developer-first headless commerce platform and Shopify alternative built on Cloudflare Workers. It's designed to do exactly what you need: serve your commerce data globally with zero friction.

Today, we're going to dive into the core of any storefront: The Products API.

The Anatomy of the Byserva API

Before we fetch our products, let's understand the ground rules. The Byserva Public API is entirely RESTful and completely CORS-friendly, meaning you can call it directly from your browser without needing a middleman server.

Every request roots back to https://api.byserva.com and requires your unique Store ID. For this tutorial, we'll use the demo Store ID from the official Byserva Developer Docs: 1457FPTZD.

Fetching Your Catalog

Getting your products is as simple as a GET request. No authentication headers, no complex GraphQL schemas—just pure JSON.

1. Retrieve All Products

To get your entire catalog, hit the /{storeId}/products endpoint.

// Fetching all products from your Byserva store
const storeId = '1457FPTZD';

fetch(`https://api.byserva.com/${storeId}/products`)
  .then(res => res.json())
  .then(data => console.log('My Products:', data))
  .catch(err => console.error('Error fetching catalog:', err));

The response is a beautifully clean array of product objects containing IDs, names, prices, quantities, and image arrays.

2. Retrieve a Single Product

Building a product detail page? Just append the Product ID to the URL.

const productId = '-OnE63diwuHJByfM7svB'; // Example ID for "Pompom"

fetch(`https://api.byserva.com/\({storeId}/products/\){productId}`)
  .then(res => res.json())
  .then(product => {
      console.log(`Viewing ${product.name} - Just $${product.price}!`);
  });

Powering Up: Filters & Pagination

If your store has hundreds of items, you don't want to load them all at once. The Byserva API gives you three powerful, stackable query parameters to control your data: sort, pg (pagination), and limit.

Sorting (sort)

Want to show the cheapest items first? Pass sort=price_asc. For premium items first, use sort=price_desc.

Pagination (pg)

Byserva handles pagination using a simple start-end format. It's 1-indexed, making it incredibly intuitive. Want items 11 through 20? Pass pg=11-20.

Limiting (limit)

Just need the top 4 items for a "Featured" section? Slap on a limit=4.

Putting It All Together (Demo Code)

Let's build a practical example. Imagine you want to create a "Trending Deals" section on your homepage. You want the first 5 cheapest items from your catalog.

Here is the exact code you'd use:

async function getTrendingDeals() {
  const storeId = '1457FPTZD';
  // Stack our queries: Sort lowest to highest, limit to 5
  const endpoint = `https://api.byserva.com/${storeId}/products?sort=price_asc&limit=5`;

  try {
    const response = await fetch(endpoint);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const deals = await response.json();
    
    console.log("🔥 Top 5 Deals:");
    deals.forEach((item, index) => {
      // Format the price (assuming the API returns a string integer like "1000")
      const formattedPrice = (parseInt(item.price) / 100).toFixed(2);
      console.log(`\({index + 1}. \){item.name} - $${formattedPrice}`);
    });

    return deals;

  } catch (error) {
    console.error("Failed to fetch trending deals:", error);
  }
}

getTrendingDeals();

Wrapping Up

That's really all there is to it. No massive SDKs to install, no convoluted auth flows for public data. Just clean, fast, reliable JSON delivered to whatever frontend framework you love.

Ready to build something incredible? Grab your Store ID from the Byserva Dashboard and head over to the Byserva Developer Documentation to explore the Collections, Validation, and Notify APIs.

Happy building! 🚀