# 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="/files/W2y0tfOkWNdRnoDS2mCV" 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="/files/VUJAZtMQMWbe6KhkmMRm" 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="/files/ISmI1SPVjx8hi5hV4SiS" 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="/files/E7cQf5f201D2fnokoTWd" 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="/files/mFtE1zCqSegG17e2DVWd" 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="/files/G7ElPHnwYQGqsod5d3On" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ereemby.gitbook.io/docs/desenvolvedores/editor-html/componentes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.