# Banner Padrão

## O que é um Banner Padrão?

O Banner Padrão é a vitrine principal do seu e-commerce Shopify, oferecendo um espaço amplo para destacar produtos, promoções ou mensagens cruciais para seus visitantes.

<div data-full-width="true"><figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2F506ASFcniNjw9kewkd0A%2Fimage.png?alt=media&#x26;token=84e3041d-0282-4c39-88ea-9d5dbd250a46" alt=""><figcaption></figcaption></figure></div>

<table data-header-hidden data-full-width="false"><thead><tr><th width="207"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Última atualização</strong></td><td>04/06/2024</td><td></td></tr><tr><td><strong>Versão</strong></td><td>1.0</td><td></td></tr><tr><td><strong>Plano</strong></td><td>Grátis</td><td></td></tr></tbody></table>

## Como instalar o Banner Padrão

1. **Instale o componente**

   1. Acesse os Componentes no LUCA App
   2. Busque pelo Banner Padrão
   3. Clique em "Instalar Componente"

2. **Adicione o componente no seu projeto**
   1. Acesse o construtor do Shopify após a instalação
   2. Escolha onde deseja adicionar o componente e clique em "Adicionar Seção"
   3. Busque por "Banner Padrão" e clique no componente

## Configurações da Seção

### **Navegação**

1. **Selecionar posição da navegação**
   * Defina se deseja que a navegão esteja na posição "Padrão" sobrepondo o banner, ou selecione "Em baixo" se  desejar que a navegação fique abaixo do banner.

{% tabs %}
{% tab title="Padrão" %}

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FQ0PDCUw9Jor7NXgDrTnc%2Fimage.png?alt=media&#x26;token=e5aaa2ac-bd29-47dc-80f0-e0eb08834cd3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Em baixo" %}

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FqbUjSnQl3tETXb7Usi8U%2Fimage.png?alt=media&#x26;token=d65ca9c5-65d2-4cec-9ce7-8114d6e58f64" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Animação**

1. **Selecionar velocidade de troca automática**
   * Defina a velocidade de troca automática entre os banners. Caso não queira a troca automática, desmarque a caixa de seleção "Trocar banners automaticamente".

### **Aparência**

1. **Selecionar largura**
   * Escolha entre "Padrão" e "Página toda". "Padrão" respeita a largura definida nas configurações gerais dos componentes ou tema. "Página toda" ignora margens e ocupa todo o espaço disponível

{% tabs %}
{% tab title="Padrão" %}

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FVfCNI4ALd7fmHSsLV6FD%2Fimage.png?alt=media&#x26;token=b528ab5a-4bb4-4885-8c4f-25ce0ff16b12" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Página toda" %}

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FfYGKzVdlK4gJvNBfOuMy%2Fimage.png?alt=media&#x26;token=2f6cdc81-8399-4459-8b04-78cc5c6f3881" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

1. **Selecionar altura**
   * Defina a altura do componente. As opções são:

<table><thead><tr><th width="204">Opção</th><th>Valor</th></tr></thead><tbody><tr><td><strong>Heróico</strong></td><td>100% da altura do navegador.</td></tr><tr><td><strong>Grande</strong></td><td>720 pixels</td></tr><tr><td><strong>Médio</strong></td><td>560 pixels</td></tr><tr><td><strong>Pequeno</strong></td><td>420 pixels</td></tr><tr><td><strong>Adaptar à mídia</strong></td><td>O componente terá a altura da mídia adicionada.</td></tr></tbody></table>

{% hint style="warning" %}
Atenção: Na opção "Adaptar à mídia", os banners com alturas diferentes podem causar inconsistências no layout.&#x20;
{% endhint %}

3. **Selecionar espaçamento vertical**
   * Defina o espaçamento entre o Banner Padrão e o componente acima e abaixo dele.

<table><thead><tr><th width="210">Opção</th><th>Descrição</th></tr></thead><tbody><tr><td><strong>Padrão</strong></td><td>Respeita a configuração global do aplicativo ou tema.</td></tr><tr><td><strong>Remover</strong></td><td>Sem espaçamento entre o Banner Padrão e os componentes acima e abaixo dele.</td></tr><tr><td><strong>Remover superior</strong></td><td>Sem espaçamento entre o Banner Padrão e o componente acima dele.</td></tr><tr><td><strong>Remover inferior</strong></td><td>Sem espaçamento entre o Banner Padrão e o componente abaixo dele.</td></tr></tbody></table>

4. **Selecionar alinhamento dos textos**
   * Defina o alinhamento dos textos dentro dos banners (esquerda, centro ou direita).<br>
5. **Posicionar textos**
   * Defina o posicionamento dos textos dentro dos banners (superior, centro ou inferior).<br>
6. **Selecionar imagem de fundo geral**
   * Configuração opcional para adicionar uma textura ou imagem ao fundo.<br>
7. **Esquema de cores**
   * Defina o esquema de cores dos elementos do Banner Padrão.

## Configurações de Blocos

O Banner Padrão possui dois blocos, Imagem e Vídeo, que são os tipos de mídia que você pode inserir no banner. Cada banner será uma imagem ou um vídeo.

### **Imagem**

1. **Selecionar imagem**
   * Escolha a imagem para o banner. A dimensão depende da largura e altura definidas na aparência.<br>
2. **Definir link da imagem**
   * Configuração opcional para que a imagem possua um link.<br>
3. **Escala de tamanho do título**
   * Ajuste a escala do título (inicialmente 100%, referente ao tamanho definido na configuração geral do app ou tema).<br>
4. **Selecionar tag do título**
   * Defina a tag para sua estratégia de SEO.<br>
5. **Escrever título**
   * Escreva o título do banner ou deixe o campo vazio se não quiser um título.<br>
6. **Escala do tamanho do texto**
   * Ajuste a escala do texto (inicialmente 100%).<br>
7. **Escrever o texto**
   * Escreva o texto desejado ou deixe o campo vazio se não quiser texto.<br>
8. **Botão e Botão Secundário**
   * **Selecionar tamanho do botão:** Escolha o tamanho do botão (grande, médio ou pequeno). Essa escolha se aplicará a ambos os botões.
   * **Selecionar estilo do botão:** Escolha o estilo visual do botão (Preenchido, Delineado, Vazio, Sublinhado).
   * **Escrever texto do botão:** Escreva o texto do botão primário ou deixe o campo vazio.
   * **Definir link do botão:** Escolha o destino do usuário ao clicar no botão.<br>
9. **Esquema de cores**
   * Defina o esquema de cores específico para o banner.<br>
10. **Selecionar intensidade da sobreposição**
    * Caso queira aplicar uma camada de cor sobre a mídia, para dar leitura para os textos e botões.

### **Vídeo**

1. **Selecionar vídeo**
   * Escolha o vídeo para o banner.<br>
2. **Definir comportamento do vídeo**
   * Escolha como o vídeo deve se comportar.
     * **Permitir autoplay:** O vídeo toca assim que for exibido.
     * **Permitir repetição:** O vídeo toca novamente ao acabar.
     * **Permitir som:** O som do vídeo será reproduzido.
     * **Reproduzir vídeo em modal:** O vídeo será reproduzido em modal ao clicar em play.
     * **Definir link do vídeo:** Configuração opcional para que o vídeo possua um link.

{% hint style="info" %}

#### Não encontrou a informação que procurava?

Entre em contato conosco via [Discord](https://discord.com/invite/Mgq9GkgawF), ou [envie um e-mail](mailto:suporte@luca.global) com sua dúvida que nosso time de suporte irá lhe atender assim que possível.
{% endhint %}