Coleção

{
  "id": "72a0c0d1-...",
  "name": "VERAO",
  "slug": "verao",
  "image": "https://cdn.example.com/collections/verao.png"
}

{
  image: {
    id: "https://cdn.example.com/collections/verao.png",
    url: "https://cdn.example.com/collections/verao.png",
    altText: "VERAO",
    width: null,
    height: null,
  },
  imageUrl: "https://cdn.example.com/collections/verao.png",
}

function CollectionCard({ category }) {
  const src = category.imageUrl || category.image?.url;
  const alt = category.image?.altText || category.title;

  return (
    <a href={category.url}>
      {src ? <img src={src} alt={alt} loading="lazy" /> : <div className="placeholder" />}
      <span>{category.title}</span>
    </a>
  );
}

const { nodes } = await storefront.categories.list({ first: 20 });
// alias: storefront.collections.list()

const { data, loading } = useCorvexData('collections', { limit: 20 });
const categories = data?.nodes ?? [];

const category = await storefront.categories.get('verao');
// ou por UUID

{
  "collection": "b41aa0fc-3458-4b0e-a136-c48bb0c32c6c"
}

{
  "collections": ["uuid-1", "uuid-2"]
}

import { usePage } from '@corvex/theme-sdk';

const { collection, products } = usePage('collection');

import { useCorvexData } from '@corvex/theme-sdk';

export default function CollectionGrid({ limit = 6 }) {
  const { data, loading } = useCorvexData('collections', { limit });

  if (loading) return null;

  return (
    <div className="collection-grid">
      {(data?.nodes ?? []).map((category) => (
        <a key={category.id} href={category.url}>
          <img src={category.imageUrl} alt={category.title} />
          <span>{category.title}</span>
        </a>
      ))}
    </div>
  );
}