Skip to main content

Kibo Storefront Catalog API Developer Guide

Catalog

Understand catalog architecture and concepts

Understanding Storefront Catalog in Kibo

The Kibo Storefront Catalog API is your primary tool for building customer-facing experiences. Unlike the Catalog Admin API, which is for managing product data, the Storefront API is optimized for speed, security, and displaying product information to shoppers. It’s designed to be called directly from a browser or a front-end application. Kibo’s philosophy here is to provide a performant, read-only view of your catalog that respects all merchandizing rules, such as active products, sale prices, and inventory visibility, without exposing sensitive administrative data.

How This Domain Fits Into Kibo

The Storefront Catalog API is the bridge between your back-end product data and your live website. It’s the engine that powers key e-commerce experiences:
  • Search: When a shopper uses the search bar, the Storefront API’s search endpoints are used to find relevant products.
  • Navigation: When a shopper clicks on a category link, the Storefront API fetches the category details and the products within it.
  • Product Detail Pages (PDP): Viewing a specific product involves calling the Storefront API to get its details, including images, price, and options.
  • Cart & Checkout: Before a product is added to the cart, the Storefront API is often used to validate its price and availability.

Prerequisites

  • Kibo Application Key (public key, safe for front-end use)
  • Node.js 16+ with TypeScript
  • Familiarity with REST APIs and front-end development concepts

What You’ll Learn

After completing this guide, you’ll understand:
  • How Kibo structures storefront-facing catalog data (based on official API specs)
  • The key patterns Kibo uses across all Storefront Catalog APIs (verified from apidocs.kibocommerce.com)
  • Common workflows for building a storefront experience, like searching and navigation
  • How to avoid the most common beginner mistakes
  • How to effectively use Kibo’s powerful search and filtering capabilities

Kibo Storefront Catalog Fundamentals

How Kibo Organizes Storefront Data

The Storefront API presents a curated version of your catalog data. A Product object from this API will include shopper-centric information like its priceRange, productImages, and options, but will omit internal data like cost. It also returns a productCode which is the key identifier used to add an item to the cart.

Key Kibo Patterns You’ll See Everywhere

Authentication Pattern: Storefront APIs use a simpler authentication method. You only need your public Application Key, which is passed in the x-vol-app-claims header. The Kibo SDK handles this header for you when you create your Configuration object, but it’s important to know you’re not using a shared secret on the front end. Request/Response Structure: Storefront API responses for product collections (ProductSearchResult) include not only the products (items) but also useful metadata for building a UI, such as facets, totalCount, and pageSize. Error Handling Approach: If a shopper tries to access a disabled product or a non-existent category, the API will return a standard 404 Not Found error. The SDK will throw an error containing the response details. Pagination and Filtering: Pagination is important for storefront performance. You’ll use startIndex and pageSize to load products on category and search pages. Filtering on the storefront is often done through facets, which are dynamically returned by the search API. API Documentation Reference: Throughout this guide, we’ll reference specific endpoints. Find complete specs at: /api-overviews/openapi_catalog_storefront_overview

Common Storefront Catalog Workflows

  1. Building Navigation: Fetching the category tree to create menus and navigation bars.
  2. Displaying Product Grids: Getting a list of products for a specific category or search query.
  3. Powering Site Search: Using the search endpoint with various parameters to handle user queries, filtering, and sorting.
Let’s explore each pattern step by step.

Getting a List of Products: The Kibo Way

When You Need This

This is one of the most common operations. You need it whenever you want to display a grid of products, such as on a category page, a search results page, or a “New Arrivals” promotional page.

API Documentation Reference


Understanding the Kibo Approach

Kibo’s storefrontGetProducts endpoint is a powerful, multi-purpose tool. It’s not just for fetching all products; it’s designed to be filtered and sorted to meet various storefront needs. The key Kibo pattern here is the use of the filter parameter. Instead of having separate endpoints for “products in a category” vs. “products by brand,” you use one endpoint and apply different filters. For example, filter=categoryId eq 123 gets products for a specific category.

Code Structure Walkthrough


Step-by-Step Implementation

Step 1: Setting Up the Foundation
Step 2: Understanding the Data Flow The parameters for this request, such as filter and pageSize, are passed as arguments to the SDK method. The SDK constructs the final URL with these query parameters. The API responds with a ProductSearchResult object, which contains an items array of Product objects and pagination details. Step 3: The Core Implementation

What Just Happened? (Code Explanation)

  • The setup phase created a Configuration object using the public appKey. This is an important security distinction from the admin APIs.
  • The API call was made using an instance of the storefront ProductsApi. We passed a configuration object to its storefrontGetProducts method containing a filter string. This demonstrates the Kibo pattern of using a single powerful endpoint for multiple use cases.
  • The response handling shows how to access both the items array (the products themselves) and the totalCount, which is essential for building pagination controls in a UI.

Common Beginner Mistakes

Mistake 1: Using admin credentials on the storefront.
Mistake 2: Not handling pagination.

How This Connects to Other Kibo Operations

  • Site Search: The storefrontGetProducts endpoint is also the engine behind search. You simply change the filter parameter to a query parameter.
  • Cart: Once a user selects a product from the list you fetched, you’ll use its productCode to add it to the cart using the Cart API.

Advanced Storefront Patterns

Business Scenario: A shopper searches for “hiking boots.” You need to display the search results and also show a list of filters (facets) like “Brand,” “Color,” and “Price” so the shopper can narrow down the results. When the shopper checks the “Waterproof” box, the search results must update accordingly. Kibo’s Architecture Consideration: Kibo’s search is designed to be efficient and powerful. The key is that the same API call that gets the product results also returns the available facets. You don’t need to make a separate API call to figure out what filters to show. You simply include the facet parameter in your request, and the response will contain a facets array, perfectly structured for building a filtering UI. API Endpoints Used: Implementation Strategy:
  1. Initial Search: Make a storefrontGetProducts call with the user’s query and a list of fields you want to facet on (e.g., brand, color).
  2. Render UI: Use the items from the response to display the products. Use the facets array from the same response to build the filtering sidebar.
  3. Refine Search: When a user selects a facet value (e.g., clicks the “Brand: Kibo Hikers” checkbox), you modify the filter parameter in your next API call to include this selection (e.g., filter=brand eq "Kibo Hikers") and re-run the search.

Multiple Real-World Examples

Example 1: Get the Storefront Category Tree This is essential for building your site’s main navigation menu.
Example 2: Site Search with Sorting
Example 3: Powering a Search Autocomplete Feature

Integrating Storefront Catalog with Other Kibo Domains

Storefront Catalog + Cart Integration

The entire shopping journey starts with the catalog. A shopper finds a product using the ProductsApi, and then you use that product’s productCode and selected options to add it to their cart using the CartApi.

Storefront Catalog + Customer Data Integration

When a logged-in shopper views a product, you can use their customer ID to call the Customer API to see if that product is on their wishlist, enabling you to render a “Saved to Wishlist” state on the product page.

Troubleshooting Your Storefront Implementation

Reading Kibo Error Messages

Common Error Codes for Storefront Catalog:
  • 404 Not Found: The most common error. This means the productCode or categoryId you requested does not exist, is not active, or is not part of the current site’s catalog.
  • 400 Bad Request: Your filter or sortBy parameter has a syntax error. Check the API documentation for the correct syntax.
  • 401 Unauthorized: Your appKey is invalid or missing from the header.

Common Development Issues

Issue 1: My products are showing the wrong price (or no price).
  • Why it happens: The Storefront API respects all pricing rules. A product might not have a price if no price list is configured for the current site or if the customer doesn’t belong to a group with a special price list.
  • How to fix it: In the Kibo Admin, verify that your product has a price in a price list that is active and assigned to your storefront’s customer segment.
  • API Reference: The pricing information is returned directly on the Product object from the Storefront API.
Issue 2: My search for a specific term returns no results, but I know the product exists.
  • Why it happens: Kibo’s search indexing takes a few moments to update after a product is created or changed. Additionally, the fields you are searching against must be configured as searchable in the catalog settings.
  • How to fix it: Wait a few minutes after creating a product. In Kibo Admin, go to System > Settings > Search and ensure the attributes you want to search by (e.g., product name, description) are enabled in the search tuning settings.
  • API Reference: /api-reference/storefrontproducts/get-products

Debugging Checklist

When your Storefront Catalog implementation isn’t working:
  1. Verify your Configuration object is using the public appKey and not your sharedSecret.
  2. Check the browser’s network tab to inspect the exact URL being called. Ensure the filter and query parameters are correctly formatted.
  3. Make sure the product or category you are requesting is Active and assigned to the Catalog of the siteId you are using.
  4. For search issues, check your site’s search settings in Kibo Admin to ensure the relevant attributes are indexed.
  5. Use the correlationId from any error message when contacting Kibo support.