Corvex — Temas

Pasta: snippets/ Pedaços reutilizáveis de código — não aparecem para o lojista no Editor. Importe no código: import ProductCard from '@corvex/snippets/product-card'.

Estrutura

snippets/
├── product-card/
│   ├── snippet.jsx
│   └── styles.css
├── money/
└── icon-cart/

Uso em section

import ProductCard from '@corvex/snippets/product-card';

export default function FeaturedProductsSection({ settings = {}, data = {} }) {
  const products = data.products || [];

  return (
    <section>
      <h2>{settings.title}</h2>
      <div className="grid">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </section>
  );
}

A seção declara os produtos no schema (data) ou num loader. O snippet só recebe o objeto que a seção já obteve. Não leia title na raiz das props. O lojista vê Featured Products no editor. Não vê ProductCard — é implementação.

Imports resolvidos pela Corvex

Alias	Origem
`@corvex/snippets/*`	`snippets/` do tema
`@corvex/theme-sdk`	SDK canônico (dados, preço, carrinho)
`@corvex/runtime`	APIs do editor (chrome, inspector) — invisível

Agência não configura webpack/esbuild.

Snippet vs Block vs SDK

	Snippet	Block	SDK
Autor	Agência	Agência	Corvex
Editor	Não	Sim	N/A
Exemplo	`product-card`	`heading`	`usePage`, `useCorvexCart`
Escopo	Este tema	Este tema	Todos os temas

Quando usar snippet

Card de produto usado em 3 sections
Formatação de preço customizada do tema
Ícones SVG
Layout interno que o lojista não deve montar bloco a bloco