Template / Page
    ↓
Section
    ↓
Block
    ↓
Snippet

export const schema = defineSection({
  name: 'Lista de produtos',
  settings: [
    { type: 'collection', id: 'collection', label: 'Coleção' },
    { type: 'range', id: 'limit', label: 'Quantidade', min: 2, max: 24, default: 8 },
  ],
});

export const data = defineSectionData(async ({ storefront, settings }) => ({
  products: await storefront.products.list({
    collection: settings.collection,
    first: settings.limit,
  }),
}));

export default function ProductList({ settings, data }) {
  return data.products.nodes.map((product) => (
    <ProductCard key={product.id} product={product} />
  ));
}

// ✅ Block recebe product da section pai
function ProductCard({ product }) {
  return (
    <>
      <img src={product.featuredImage?.url} alt={product.title} />
      <h3>{product.title}</h3>
      <span>{product.price.formatted}</span>
    </>
  );
}

// ❌ Block buscando API
async function ProductCard() {
  const products = await fetch('/api/...');
}

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

const { items, total, addItem } = useCorvexCart();

addItem(product, 1);