# Banners

{% hint style="info" %}
**Para saber mais sobre como gerenciar banners acesse o link:** [Cadastrar Banners](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743567784603-Cadastrar-Banners)
{% endhint %}

### Pop up <a href="#pop-up" id="pop-up"></a>

Banner gerado através da chamada padrão da plataforma `{{ banner.popup ~ banner.floating }}`

O banner popup abre-se em uma nova janela do navegador, no momento em que a loja virtual é aberta.

Em seu cadastro é possível definir qual será a Margem superior e a Margem esquerda para essa nova janela.

| Atributos     | Características                                         |
| ------------- | ------------------------------------------------------- |
| `data-banner` | Posição do banner (ex: popup, gallery)                  |
| `data-width`  | Largura do banner                                       |
| `data-height` | Altura do banner                                        |
| `data-top`    | Distância vertical entre o topo até o início do banner  |
| `data-left`   | Distância horizontal da esquerda até o início do banner |
| `data-url`    | URL do banner que será carregada na Pop-Up              |

```html
<div data-banner="popup"
        data-width="200"
        data-height="200"
        data-top="400"
        data-left="400">
</div>
```

### Gallery <a href="#gallery" id="gallery"></a>

Banner gerado através da chamada padrão da plataforma do banner home `{{ banner.home }}`

No cadastro dos banners, é possível que o mesmo seja cadastrado como galeria. Nesse caso são selecionados até 4 produtos e com suas imagens é gerado o banner de galeria. Sendo exibida em tamanho grande a imagem principal do produto, acompanhado do seu título, descrição e preço, e ao lado as imagens e o título dos demais produtos.

| Atributos     | Características                        |
| ------------- | -------------------------------------- |
| `data-banner` | Posição do banner (ex: popup, gallery) |
| `data-id`     | Identificador único do banner          |

```html
<div data-banner="gallery" data-id="1"></div>
```

**Como cadastrar**

<figure><img src="/files/kkDFRoxlEbBrYczD1TQ3" alt=""><figcaption></figcaption></figure>

**Exibição do banner na loja**

<figure><img src="/files/mYRqEZICGsx9l8w57iYy" alt=""><figcaption></figcaption></figure>


---

# 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://partners.tray.com.br/themes/construindo-seu-template/referencias/data-attributes/banners.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.