> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Snippets

> snippets/ — componentes internos do desenvolvedor, importados por sections e blocks.

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

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.