- O banner tarja é uma faixa que destaca informações para os clientes, como condições de parcelamento, prazos de entrega, política de troca e devolução, descontos por forma de pagamento e garantias.
- Você monta a tarja em Personalizar Loja > Banners, com o tipo "Grade" e uma altura baixa.
- Depois, escolhe em qual página ela aparece e salva.
Antes de começar
- Acesso à aba Personalizar Loja do painel.
- A imagem da tarja pronta, com o texto ou as informações que você quer destacar.
- Definido em qual página da loja a tarja deve aparecer.
Etapa 1: abra "Banners" e clique em "Adicionar"
No menu lateral, clique em "Personalizar Loja" e depois em "Banners". Clique no botão verde "Adicionar". O formulário que abre se chama "Banner Versão 2".
Etapa 2: preencha as informações
- Status: vem ligado. Deixe ligado.
- Nome do Banner: obrigatório.
- Título da Grade e Data de Início/Término: preencha, se quiser.
- Exibir em: marque "Desktop", "Mobile" ou os dois.
- Tipo do banner: deixe "Grade".
Etapa 3: monte a tarja na grade
Em "Configuração de Grade", clique em "Adicionar" para criar um bloco de imagem. Dentro do bloco, clique em "Adicionar" para abrir o gerenciador de mídia. Escolha a imagem e clique em "Inserir". Para sair sem inserir, clique em "Cancelar". O botão "Remover" tira o bloco.
Mova a barra "Altura do Banner", com a seta de duas direções, para cima ou para baixo. Deixe a altura baixa para o banner ficar em formato de tarja. Para definir as medidas do bloco, clique no lápis do bloco. A janela "Tamanho" tem os campos "Largura (máx. 1920):" e "Altura:".
Etapa 4: preencha as propriedades da imagem (opcional)
Ao selecionar um bloco da grade, aparece "Propriedades da Imagem N" com estes campos:
- Nome da Imagem:
- Alt da Imagem:
- Link da Imagem:
- Abrir Link: escolha "Aba atual" ou "Nova aba".
- Data de Início da Imagem e Data de Término da Imagem: definem o prazo da imagem.
- Animação: veja a etapa 5.
Sobre as datas, o painel explica que primeiro vale a data de início do banner e, em seguida, a data de início da imagem. Se a data da imagem ficar em branco, vale só a data do banner. A data de término segue o mesmo critério: primeiro a do banner, depois a da imagem.
Etapa 5: configure a animação (opcional)
Ligue a chave "Animação" para aplicar uma animação à imagem. Segundo o painel, a animação vale para desktop e mobile. Ao ligar, aparecem estes campos:
- Habilitar Animação Dos Módulos: o painel avisa "Habilite os scripts de animação para essa configuração funcionar".
- Estilo da animação: vem em "Surgir para cima". Há estilos de surgir, girar, aumentar e diminuir, em várias direções.
- Duração da animação em ms: vem em 1000. Quanto maior o valor, mais lenta é a animação. Só aceita múltiplos de 50, entre 0 e 3000.
- Delay para animação começar em ms: vem em 50. É o tempo de espera para a animação começar depois do ponto de ancoragem. Só aceita múltiplos de 50, entre 0 e 3000.
- Ancoragem da animação: vem em "Acima do módulo e no final da página". Define o momento em que a animação começa quando você rola a página. Por exemplo, com "Acima do módulo e no final da página", a animação começa quando a parte superior do módulo chega ao final da página.
- Offset. Deslocamento em pixel: vem em 200. Desloca o ponto de ancoragem: valores positivos deslocam para cima, e valores negativos, para baixo.
A tela também mostra "Exemplo de animações", com os botões "Anterior" e "Próximo", para ver como cada animação se comporta. Se houver um banner carrossel (V2) na página, o painel recomenda definir uma altura no campo "Tamanho do Carrossel" para não afetar a animação.
Etapa 6: defina onde a tarja aparece
No bloco "Onde o módulo irá aparecer na loja", clique em "Adicionar". Na linha que aparece, escolha:
- Layout: a página em que o banner será exibido.
- Posição: onde o banner fica na página.
- Ordem: a ordem de exibição.
O painel recomenda usar o módulo no layout "Página Inicial", "Dentro do Conteúdo" ou "Topo do Conteúdo".
Etapa 7: salve
Clique em "Salvar", no topo da tela. Confira se o "Status" está ligado, senão o banner não é exibido.
O painel também tem a tela "Personalizar Loja > Tarja Informativa", com formulário próprio. Segundo o painel, esse módulo está disponível apenas para lojas que usam o tema Lime.
Perguntas frequentes
Para que serve o banner tarja?
Para destacar informações que atraiam a atenção dos clientes, como condições de parcelamento, prazos de entrega, política de troca e devolução, descontos por forma de pagamento e garantias.
Em quais páginas posso exibir a tarja?
Em qualquer uma das páginas da lista "Layout", como Página Inicial, Categorias, Carrinho e Busca. O painel recomenda a Página Inicial, "Dentro do Conteúdo" ou "Topo do Conteúdo".
Por que a posição não muda na página inicial?
Na nova estrutura de template, os módulos da página inicial sempre ficam no mesmo nível. A posição é fixa como "Topo do Conteúdo", e a ordenação ainda funciona.
Posso escolher se a tarja aparece no computador ou no celular?
Sim. Em "Exibir em", marque "Desktop", "Mobile" ou os dois.
Que opções de posição existem?
"Topo do Conteúdo", "Dentro do Conteúdo", "Coluna Esquerda" e "Coluna Direita".
Posso definir um prazo para a imagem da tarja?
Sim. Em "Propriedades da Imagem N", use "Data de Início da Imagem" e "Data de Término da Imagem". Se a data da imagem ficar em branco, vale só a data do banner.
Para que serve a animação?
Ela aplica um efeito à imagem, como surgir, girar, aumentar ou diminuir, quando você rola a página. A animação vale para desktop e mobile.
A tela "Tarja Informativa" serve para qualquer loja?
Segundo o painel, esse módulo está disponível apenas para lojas que usam o tema Lime.
Erros comuns
Não encontro "Adicionar Banner" nem "Criar Novo Banner"
Em Personalizar Loja > Banners, o botão se chama "Adicionar".
O banner não aparece na loja
Confira se o "Status" está ligado e se você clicou em "Salvar".
Escolhi outra posição e a tarja continua no topo da página inicial
Na página inicial, a posição é fixa como "Topo do Conteúdo". Só a ordem muda.
Liguei a animação e ela não funciona
O painel avisa que é preciso habilitar os scripts de animação: ligue a chave "Habilitar Animação Dos Módulos" para a configuração funcionar.