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.

Última atualização	04/06/2024
Versão	1.0
Plano	Grátis

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.

Padrão

Em baixo

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

Padrão

Página toda

1. Selecionar altura

   • Defina a altura do componente. As opções são:

Opção	Valor
Heróico	100% da altura do navegador.
Grande	720 pixels
Médio	560 pixels
Pequeno	420 pixels
Adaptar à mídia	O componente terá a altura da mídia adicionada.

Atenção: Na opção "Adaptar à mídia", os banners com alturas diferentes podem causar inconsistências no layout.

1. Selecionar espaçamento vertical

   • Defina o espaçamento entre o Banner Padrão e o componente acima e abaixo dele.

Opção	Descrição
Padrão	Respeita a configuração global do aplicativo ou tema.
Remover	Sem espaçamento entre o Banner Padrão e os componentes acima e abaixo dele.
Remover superior	Sem espaçamento entre o Banner Padrão e o componente acima dele.
Remover inferior	Sem espaçamento entre o Banner Padrão e o componente abaixo dele.

1. Selecionar alinhamento dos textos

   • Defina o alinhamento dos textos dentro dos banners (esquerda, centro ou direita).

2. Posicionar textos

   • Defina o posicionamento dos textos dentro dos banners (superior, centro ou inferior).

3. Selecionar imagem de fundo geral

   • Configuração opcional para adicionar uma textura ou imagem ao fundo.

4. 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.

2. Definir link da imagem

   • Configuração opcional para que a imagem possua um link.

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).

4. Selecionar tag do título

   • Defina a tag para sua estratégia de SEO.

5. Escrever título

   • Escreva o título do banner ou deixe o campo vazio se não quiser um título.

6. Escala do tamanho do texto

   • Ajuste a escala do texto (inicialmente 100%).

7. Escrever o texto

   • Escreva o texto desejado ou deixe o campo vazio se não quiser texto.

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.

9. Esquema de cores

   • Defina o esquema de cores específico para o banner.

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.

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.

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

Entre em contato conosco via Discord, ou envie um e-mail com sua dúvida que nosso time de suporte irá lhe atender assim que possível.