> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/referencias/data-attributes/banners.md).

# 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>