Categories - Shopi

Returns all categories for the shop. Use these to build navigation menus and product filter UIs.

const categories = await shop.categories.list();

Response

Array<{
  id: string;
  name: string;
  image_url: string | null;
}>

const categories = await shop.categories.list();

categories.forEach(cat => {
  const link = document.createElement('a');
  link.href = `/category/${encodeURIComponent(cat.name)}`;
  link.textContent = cat.name;

  if (cat.image_url) {
    const img = document.createElement('img');
    img.src = cat.image_url;
    link.prepend(img);
  }

  navMenu.appendChild(link);
});

const categories = await shop.categories.list();

// Render filter tabs
const tabs = [{ id: '', name: 'All' }, ...categories];

tabs.forEach(cat => {
  const btn = document.createElement('button');
  btn.textContent = cat.name;
  btn.addEventListener('click', () => {
    filterProducts(cat.name || undefined);
  });
  filterBar.appendChild(btn);
});

async function filterProducts(category?: string) {
  const { products } = await shop.products.list({ category });
  renderGrid(products);
}
```---
title: "fetch-categories"
---