Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.komerza.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Image URLs

The Komerza API returns image filenames rather than full URLs. All user-generated content is served from a single CDN: 
https://user-generated-content.komerza.com
To display an image, append the filename to this base URL.

​
Building Image URLs

const CDN_BASE = "https://user-generated-content.komerza.com";

function getImageUrl(filename) {
  return `${CDN_BASE}/${filename}`;
}

​
Product Images

Products have an imageNames array containing filenames: 
const response = await komerza.getProduct("product-slug");
const product = response.data;

// Get full URLs for all product images
const imageUrls = product.imageNames.map(
  (filename) => `https://user-generated-content.komerza.com/${filename}`
);

// Display first image
const primaryImage = imageUrls[0];
document.getElementById("product-image").src = primaryImage;

​
Variant Images

Variants also have their own imageNames array: 
const variant = product.variants[0];

// Get variant-specific images
const variantImages = variant.imageNames.map(
  (filename) => `https://user-generated-content.komerza.com/${filename}`
);

​
Store Logo and Banner

For store images, use the built-in helper functions instead: 
const logoUrl = komerza.getStoreLogoUrl();
const bannerUrl = komerza.getStoreBannerUrl();
These functions handle the URL construction automatically. See Store Information for details.

​
Image Helper Function

Create a reusable helper for your storefront: 
const kz = {
  cdn: "https://user-generated-content.komerza.com",

  imageUrl(filename) {
    if (!filename) return null;
    return `${this.cdn}/${filename}`;
  },

  imageUrls(filenames) {
    if (!filenames) return [];
    return filenames.map((f) => this.imageUrl(f));
  },
};

// Usage
const product = response.data;
const images = kz.imageUrls(product.imageNames);
const thumbnail = kz.imageUrl(product.imageNames[0]);

<div class="product-gallery">
  <img id="main-image" class="main-image" />
  <div id="thumbnails" class="thumbnails"></div>
</div>

<script>
  const CDN = "https://user-generated-content.komerza.com";

  async function loadProductGallery(productId) {
    const response = await komerza.getProduct(productId);
    if (!response.success) return;

    const product = response.data;
    const mainImage = document.getElementById("main-image");
    const thumbnails = document.getElementById("thumbnails");

    // Set main image
    if (product.imageNames.length > 0) {
      mainImage.src = `${CDN}/${product.imageNames[0]}`;
      mainImage.alt = product.name;
    }

    // Create thumbnails
    product.imageNames.forEach((filename, index) => {
      const thumb = document.createElement("img");
      thumb.src = `${CDN}/${filename}`;
      thumb.alt = `${product.name} - Image ${index + 1}`;
      thumb.onclick = () => {
        mainImage.src = thumb.src;
      };
      thumbnails.appendChild(thumb);
    });
  }
</script>

​
Example: Product Card

function createProductCard(product) {
  const imageUrl = product.imageNames[0]
    ? `https://user-generated-content.komerza.com/${product.imageNames[0]}`
    : "/placeholder.png";

  return `
    <div class="product-card">
      <img src="${imageUrl}" alt="${product.name}" />
      <h3>${product.name}</h3>
      <p>${product.variants[0].cost}</p>
    </div>
  `;
}

​
Handling Missing Images

Always handle cases where images may not exist: 
function getImageUrl(filename, fallback = "/placeholder.png") {
  if (!filename) return fallback;
  return `https://user-generated-content.komerza.com/${filename}`;
}

// With error handling in HTML
<img
  src="${getImageUrl(product.imageNames[0])}"
  onerror="this.src='/placeholder.png'"
  alt="${product.name}"
/>;

​
Image Types

SourcePropertyType
ProductimageNamesstring[]
VariantimageNamesstring[]
StoreUse getStoreLogoUrl()Helper function
StoreUse getStoreBannerUrl()Helper function