Render a product grid

Build a browsable storefront grid from the public catalog - a page of products, each with a name, price, image, and a coarse availability band - using only a publishable key (browser-safe, anonymous catalog reads). No shopper login, no secret key.

This is the most common first integration: a headless storefront's listing page.

What you need

• A publishable sandbox key (hk_test_pub_…). Grab one from the admin API keys screen.
• Nothing else - catalog reads are anonymous.

→ Get your API keys

Paste your key once and every snippet below rewrites to use it:

Paste your API key once

Stored only in this browser, never sent anywhere but the API. Every snippet on the page rewrites to use it.

1. List a page of products

GET /v1/products returns a page of catalog items plus a pagination block. Paginate with page / page_size; narrow with q, category, or tag.

curl -s "https://api.harmon.example/v1/products?page=1&page_size=12" \
  -H "Authorization: Bearer hk_test_pub_your_key_here"

Each item carries a coarse availability band (IN_STOCK / LOW / OUT), never a raw on-hand count - render it as a badge, not a quantity. See Availability.

Cache the grid

The list response carries a strong ETag. Send it back as If-None-Match on the next load to get a 304 Not Modified when nothing changed - see Pagination & caching.

2. Link each card to its detail page

The grid links each card to a product detail view backed by GET /v1/products/{sku}:

curl -s "https://api.harmon.example/v1/products/SKU-123" \
  -H "Authorization: Bearer hk_test_pub_your_key_here"

Next steps

• Keep a local catalog fresh with updated_since - sync only what changed instead of refetching every page.
• Customer-priced catalog with a shopper token - show contract pricing once a shopper signs in.
• Availability - the coarse-band model in full.

In the API Reference

Open these operations in the interactive reference (with a Try it console):

• GET /v1/products - list the catalog
• GET /v1/products/{sku} - a single product