Store Information

Overview

Access your store’s public information including name, description, logo, banner, and currency settings.

Get Store Details

Retrieve complete information about your store.

const response = await komerza.getStore();

Returns

Returns ApiResponse<Store>:

interface Store {
  id: string; // Store identifier
  name: string; // Store name
  description: string; // Store description (supports markdown)
  url: string; // Store subdomain
  customDomain?: string; // Custom domain if set
  currencyCode: string; // ISO 4217 currency code (e.g., "USD")
  domain: string; // Full domain
  rating: number; // Average store rating
  maintenanceReason?: string; // If store is in maintenance mode
  branding?: {
    iconFileName?: string; // Logo filename
    bannerFileName?: string; // Banner filename
    accentColor?: string; // Store accent color
    isAutomaticCurrencyConversionEnabled?: boolean;
  };
  products: ProductReference[]; // List of products
  categories: Category[]; // List of store categories
  affiliateOptions?: {
    isEnabled: boolean;
    defaultReturnPercentage: number;
    defaultPercentageOff: number;
    canConvertAffiliateBalance: boolean;
    isPublicRegistrationEnabled: boolean;
    isLinkEditingEnabled: boolean;
  };
  dateCreated: string; // ISO 8601 timestamp
}

interface Category {
  id: string;
  name: string;
  slug: string;
  visibility: number;
  order: number;
  storeId: string;
  productCount: number;
  products: string[]; // List of product IDs
  dateCreated: string;
}

Example

// Display store information
async function displayStoreInfo() {
  const response = await komerza.getStore();

  if (response.success) {
    const store = response.data;

    document.getElementById("store-name").textContent = store.name;
    document.getElementById("store-description").textContent =
      store.description;
    document.getElementById(
      "product-count"
    ).textContent = `${store.products.length} products`;

    console.log(`Store uses ${store.currencyCode} currency`);
  }
}

Get Store Logo

Get the URL to your store’s logo image.

const logoUrl = await komerza.getStoreLogoUrl();

Returns

Returns a string containing the full URL to the logo image.

Example

// Display store logo
async function displayLogo() {
  const logoUrl = await komerza.getStoreLogoUrl();

  const img = document.createElement("img");
  img.src = logoUrl;
  img.alt = "Store Logo";
  document.getElementById("logo-container").appendChild(img);
}

Get the URL to your store’s banner image.

const bannerUrl = await komerza.getStoreBannerUrl();

Returns

Returns a string containing the full URL to the banner image.

Example

// Display store banner
async function displayBanner() {
  const bannerUrl = await komerza.getStoreBannerUrl();

  document.getElementById(
    "hero-banner"
  ).style.backgroundImage = `url('${bannerUrl}')`;
}

Currency Formatter

Create a number formatter for displaying prices in your store’s currency.

const formatter = await komerza.createFormatter();

Returns

Returns an Intl.NumberFormat instance configured for your store’s currency.

Example

// Format prices consistently
async function displayProduct(product) {
  const formatter = await komerza.createFormatter();

  product.variants.forEach((variant) => {
    const priceFormatted = formatter.format(variant.cost);
    console.log(`${variant.name}: ${priceFormatted}`);
  });
}

Advanced Formatting

const formatter = await komerza.createFormatter();

// Format different amounts
console.log(formatter.format(29.99)); // "$29.99" (USD)
console.log(formatter.format(100)); // "$100.00"
console.log(formatter.format(0.99)); // "$0.99"

// Use in templates
const price = formatter.format(product.price);
element.innerHTML = `<span class="price">${price}</span>`;

Complete Example

Here’s a complete storefront header with store branding:

<!DOCTYPE html>
<html>
  <head>
    <title>Store</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
    <style>
      .header {
        text-align: center;
        padding: 20px;
      }
      .logo {
        max-width: 200px;
        height: auto;
      }
      .banner {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
      }
      .store-info {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <img id="logo" class="logo" alt="Store Logo" />
      <h1 id="store-name"></h1>
      <p id="store-description"></p>
      <p id="store-stats"></p>
    </div>

    <div id="banner" class="banner"></div>

    <div id="products"></div>

    <script>
      // Initialize
      komerza.init("your-store-id");

      // Load store information
      async function loadStore() {
        try {
          // Get all store data in parallel
          const [storeResponse, logoUrl, bannerUrl, formatter] =
            await Promise.all([
              komerza.getStore(),
              komerza.getStoreLogoUrl(),
              komerza.getStoreBannerUrl(),
              komerza.createFormatter(),
            ]);

          if (!storeResponse.success) {
            console.error("Failed to load store:", storeResponse.message);
            return;
          }

          const store = storeResponse.data;

          // Display branding
          document.getElementById("logo").src = logoUrl;
          document.getElementById(
            "banner"
          ).style.backgroundImage = `url('${bannerUrl}')`;

          // Display store info
          document.getElementById("store-name").textContent = store.name;
          document.getElementById("store-description").textContent =
            store.description;
          document.getElementById(
            "store-stats"
          ).textContent = `${store.products.length} products • ${store.rating}★ rating`;

          // Display products with formatted prices
          const productsHtml = store.products
            .map((product) => {
              const minPrice = Math.min(...product.variants.map((v) => v.cost));
              const priceFormatted = formatter.format(minPrice);

              return `
            <div class="product">
              <h3>${product.name}</h3>
              <p>${product.description}</p>
              <p class="price">From ${priceFormatted}</p>
            </div>
          `;
            })
            .join("");

          document.getElementById("products").innerHTML = productsHtml;
        } catch (error) {
          console.error("Error loading store:", error);
        }
      }

      // Load on page load
      loadStore();
    </script>
  </body>
</html>

Caching

Store data is automatically cached by the library for performance: Cached data:

Store details (getStore)
Logo URL (getStoreLogoUrl)
Banner URL (getStoreBannerUrl)
Currency formatter (createFormatter)

The library handles cache invalidation automatically. You don’t need to worry about stale data.

Error Handling

// Handle store loading errors
async function loadStoreInfo() {
  const response = await komerza.getStore();

  if (!response.success) {
    console.error("Failed to load store:", response.message);

    // Show user-friendly error
    document.getElementById("error").textContent =
      "Unable to load store information. Please try again later.";
    return;
  }

  // Handle maintenance mode
  if (response.data.maintenanceReason) {
    document.getElementById("maintenance").textContent =
      response.data.maintenanceReason;
    document.getElementById("maintenance").style.display = "block";
  }

  // Process store data
  displayStore(response.data);
}

Best Practices

Load in parallel - Use Promise.all() to fetch store data, logo, and banner simultaneously for faster loading Cache the formatter - Create the currency formatter once and reuse it throughout your page Handle maintenance mode - Check maintenanceReason and display appropriate messages to customers Fallback for images - Provide fallback images if logo/banner URLs fail to load Markdown support - Store descriptions support markdown - use a markdown parser if needed

Getting Started

Client Library

Overview

Get Store Details

Returns

Example

Get Store Logo

Returns

Example

Get Store Banner

Returns

Example

Currency Formatter

Returns

Example

Advanced Formatting

Complete Example

Caching

Error Handling

Best Practices

Next Steps

Products

Basket Management

​Overview

​Get Store Details

​Returns

​Example

​Get Store Logo

​Returns

​Example

​Get Store Banner

​Returns

​Example

​Currency Formatter

​Returns

​Example

​Advanced Formatting

​Complete Example

​Caching

​Error Handling

​Best Practices

​Next Steps

Products

Basket Management

Overview

Get Store Details

Returns

Example

Get Store Logo

Returns

Example

Get Store Banner

Returns

Example

Currency Formatter

Returns

Example

Advanced Formatting

Complete Example

Caching

Error Handling

Best Practices

Next Steps