> For the complete documentation index, see [llms.txt](https://ereemby.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ereemby.gitbook.io/docs/desenvolvedores/editor-html/componentes.md).

# Componentes

Componentes pré-prontos para colar no **Editor HTML** do site.

Se você ainda não sabe onde fica esse editor, veja: [Editor HTML](/docs/desenvolvedores/editor-html.md)

Você cola um snippet (um `div` vazio com um `id` específico). O site detecta esse `id` e renderiza o componente no lugar.

{% hint style="warning" %}
Não renomeie o `id`.\
Se você mudar uma letra, o componente não carrega.
{% endhint %}

### Onde você consegue usar esses componentes

Você só consegue editar o HTML em:

* **Home (`/`)**
* **Páginas novas** criadas em **Customizar layout**

Você **não** consegue editar o HTML de páginas já existentes do sistema. Nelas, use o sistema de **JavaScript global** e **CSS global**.

### Como inserir no Editor HTML

{% stepper %}
{% step %}

### Crie uma página nova (Customizar layout)

Entre no dashboard da loja. Abra **Customizar layout** (ícone de pincel). Crie uma **nova página**.
{% endstep %}

{% step %}

### Abra o Editor HTML

Abra a página que você criou (ou a home `/`). Entre no **Editor HTML**.
{% endstep %}

{% step %}

### Cole o snippet no local certo

Cole o snippet exatamente onde você quer que o componente apareça.
{% endstep %}

{% step %}

### Salve e publique

Salve as alterações. Recarregue a página no site para validar.
{% endstep %}
{% endstepper %}

### 1) Lista de produtos/categorias da página

**O que faz:** carrega todos os produtos/categorias vinculados à página onde o código é inserido.

**Quando usar:** páginas de vitrine, landing de coleção, “Todos os produtos”.

**Como inserir:** cole o snippet no local onde deseja renderizar a grade.

```html
<div id="COMPONENT_PRODUCTS_CARDS"></div>
```

{% hint style="info" %}
Se não aparecer nada, revise se esta página tem produtos/categorias vinculados.
{% endhint %}

<details>

<summary>Imagem de exemplo</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FcXHtUGgi3zmFtlDbxaqt%2FNVIDIA_Overlay_VENRBdmVSB.webp?alt=media&amp;token=650aedd6-4066-40f0-9cdc-4568698a704f" alt=""><figcaption></figcaption></figure>

</details>

### 2) Carrossel de categorias

**O que faz:** exibe um carrossel de categorias em formato de cards com a imagem configurada na categoria.

Se você usa subcategorias, aqui aparecem apenas as **subcategorias**. Para exibir categoria + subcategorias juntas, use o componente 6.

**Quando usar:** home, páginas com destaque de categorias, seção “Explore por categoria”.

**Como inserir:** cole o snippet onde deseja que o carrossel apareça.

```html
<div id="COMPONENT_CATEGORYS_CARDS"></div>
```

<details>

<summary>Imagem de exemplo</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2Fhhb2BU5lfps8Z19KO6eO%2FNVIDIA_Overlay_5plLicXYYA.webp?alt=media&amp;token=74fe94ff-250f-4583-9b83-cd4817840445" alt=""><figcaption></figcaption></figure>

</details>

### 3) Cards principais de categorias (fixos)

**O que faz:** renderiza os cards principais do sistema de subcategoria em grade fixa (não é carrossel).

**Quando usar:** páginas de categoria-mãe para navegação hierárquica.

**Como inserir:** insira o snippet na região onde quer a grade fixa.

```html
<div id="COMPONENT_SUB_CATEGORYS_CARDS"></div>
```

<details>

<summary>Imagem de exemplo</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FoRW4sWzPyzY0zDnNudUE%2FNVIDIA_Overlay_mlX3mU3GIP.webp?alt=media&amp;token=0eb70e7d-5558-404f-82ff-d74329831e04" alt=""><figcaption></figcaption></figure>

</details>

### 4) Últimas avaliações (carrossel)

**O que faz:** mostra as avaliações mais recentes em formato de carrossel.

**Quando usar:** home, páginas de produto, landing pages com prova social.

**Como inserir:** cole o snippet no ponto desejado da página.

```html
<div id="COMPONENT_FEEDBACKS_CARDS"></div>
```

<details>

<summary>Imagem de exemplo</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FBfSUQ73TULy32Cx5HD8o%2FNVIDIA_Overlay_WrqI4e3tZp.webp?alt=media&amp;token=11256748-fa29-4b26-8e8c-45be78077deb" alt=""><figcaption></figcaption></figure>

</details>

### 5) Plano de fundo do site

**O que faz:** insere o plano de fundo (banner) configurado nas opções do site.

**Quando usar:** páginas onde você quer mostrar o fundo do site. Sem esse componente, o fundo pode ficar **preto** (padrão).

**Como inserir:** insira o snippet na página desejada.

```html
<div id="COMPONENT_BACKGROUND_IMAGE"></div>
```

<details>

<summary>Imagem de exemplo</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FlUZ50p7IrcSKIzLU7Rai%2FNVIDIA_Overlay_aLQhUH8PRw.webp?alt=media&amp;token=791eab34-e488-4d60-be33-ce49f3522d30" alt=""><figcaption></figcaption></figure>

</details>

### 6) Carrossel de categorias junto com subcategorias

**O que faz:** exibe um carrossel com **categorias e subcategorias** em cards. As imagens vêm do cadastro da categoria/subcategoria.

**Quando usar:** home, páginas com destaque de categorias, seção “Explore por categoria”.

**Como inserir:** cole o snippet onde deseja que o carrossel apareça.

```html
<div id="COMPONENT_CATEGORYS_CARDS_ALL"></div>
```

<details>

<summary>Imagem de exemplo</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FqvxfprYsVqrmwxkrkoiZ%2Fimage.webp?alt=media&amp;token=947e098f-d5a9-4a7c-9eb5-9da778f0ceec" alt=""><figcaption></figcaption></figure>

</details>

### Problemas comuns

* **O componente não aparece**
  * Confirme se o `id` está idêntico ao snippet.
  * Confirme se você salvou/publicou a página.
* **Lista vazia**
  * No componente 1, revise se a página tem produtos/categorias vinculados.
  * No componente 4, revise se você já tem avaliações publicadas.