Crie um banner

Este é o caminho completo, de uma página Banners vazia até uma barra que quem visita a loja pode ver.

Cuidado

A incorporação do app precisa estar ativada, ou nada do que o app criar será exibido na sua loja virtual. Consulte Ative a incorporação do app.

1. Abra Banners e comece um

   No menu do app, clique em Banners e depois em Create banner.

   Se este for o seu primeiro, a página mostra Create your first banner com o mesmo botão no centro.

   

   A página Banners antes de você criar um.

2. Escolha um ponto de partida

   Uma caixa de diálogo abre com dez modelos iniciais, agrupados por finalidade. Clique em um à esquerda e a pré-visualização à direita mostra a barra como ela ficará em uma página.

   Grupo	Modelos iniciais
   Sale and urgency	Flash sale, Black Friday, Selling fast, Sticky footer
   Discount code	Discount code, Welcome offer
   Shipping	Free shipping, Shipping cutoff
   Announcement	Announcement, New arrivals

   Abaixo da pré-visualização, pequenos rótulos indicam o que há dentro (Text, Countdown, Button) e onde fica.

   Prefere criar do zero? Escolha Start from blank no final da lista.

   Clique em Use this template.

   

   Todo modelo inicial pode ser alterado depois; nada nele é fixo.

3. Dê um nome

   O construtor abre. No canto superior esquerdo, troque o nome por algo que você reconheça na lista: “Barra superior Black Friday”, e não “Banner 3”.

   O contador ao lado do campo mostra quanto espaço ainda resta.

4. Escreva o que a barra diz

   O painel Content lista os elementos da barra. Clique em um e as configurações dele abrem na coluna à direita.

   • Clique em Text para alterar a mensagem
   • Clique em Countdown para definir a data final
   • Clique em Button para alterar o rótulo e o destino
   • Arraste a alça à esquerda de uma linha para reordenar
   • Add element coloca um novo no final

   Consulte Conteúdo e elementos da barra para saber o que cada elemento pode fazer.

   

   Escolha um elemento à esquerda e altere-o à direita.

5. Defina o estilo

   Abra o painel Design, o ícone de pincel na lateral.

   Defina o fundo, as cores de texto e de destaque, quanto espaço a barra ocupa e se quem visita a loja pode fechá-la. Consulte Crie o design de um banner.

6. Escolha onde ele aparece

   Abra o painel Placement, o terceiro ícone na lateral.

   • Top of the page empurra a página para baixo; Bottom of the page fixa a barra no pé da tela
   • Stay on screen mantém a barra à vista enquanto a pessoa rola a página
   • Conditions decidem quais páginas a exibem; deixe em All pages para mostrar em todas
   • Devices limita a exibição ao computador ou ao celular
   • Schedule liga e desliga a barra automaticamente

   Consulte Onde um banner aparece.

7. Confira a pré-visualização

   O centro do construtor mostra a barra em uma página de loja virtual de demonstração. Os dois ícones no topo alternam entre as larguras de computador e celular; vale a pena conferir, porque uma barra que fica boa em um notebook pode ficar apertada em um celular.

8. Defina como Active e salve

   Ao lado do nome, mude de Draft para Active e clique em Save.

   Draft salva o banner sem mostrá-lo a ninguém. Active é o que o coloca na loja virtual.

   

   Um banner precisa estar Active para que alguém possa vê-lo.

9. Veja a sua loja virtual

   Abra a sua loja em uma nova guia e recarregue. A barra deve estar no topo ou no pé da página.

   Não está lá? Siga as verificações de O cronômetro não aparece; as mesmas verificações valem para banners.

Se o botão precisar de um link

Um botão configurado como Open a link precisa de uma URL para que o banner possa ser salvo como Active. Os modelos iniciais já vêm com /collections/all preenchido, então altere para o destino onde você quer que as pessoas cheguem.

Próximas etapas

• Conteúdo e elementos da barra
• Crie o design de um banner
• Animação e grupos
• Onde um banner aparece