# 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FcjYhNtk4PrykRIbZ93DL%2Fprint1.png?alt=media&#x26;token=e24216ea-699f-4078-9656-8dfcdb147a0b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fary9U0vR0MKseBGsVbDQ%2Fprint2.png?alt=media&#x26;token=d07b1eea-7947-4732-b343-c2fda022b628" alt=""><figcaption></figcaption></figure>