Criar um banner básico

Um banner básico é uma barra montada com elementos de conteúdo — títulos, mensagens, botões, contagens regressivas, imagens — agrupados em uma ou mais seções. O editor tem duas abas: Design (conteúdo e estilo) e Placement (onde e para quem a barra aparece).

1. Abra a página Banners

   No admin da Shopify, abra o app Sami Product Labels, clique em Extra Features na barra lateral do app e depois mude para a aba Banners.

   

   Abra Banners pela barra lateral do Sami Product Labels.

2. Clique em Create banners e escolha Basic

   Clique em Create banners. Na caixa de diálogo Select Type, clique em Select ao lado de Basic — o tipo que aceita um ou vários grupos de conteúdo.

   

   Escolha Basic para criar uma barra de avisos padrão.

   Nota

   Prefere não começar do zero? Na página Banners, use Featured templates ou View all templates para abrir um banner pronto e editá-lo.

3. Dê um nome ao banner

   O editor em tela cheia abre na aba Design. Substitua New Banner no campo de nome acima da prévia por um nome de até 50 caracteres. Esse nome é interno — ele identifica o banner na sua lista e nunca é exibido para quem compra.

   Ao lado do nome, você também encontra um seletor de idioma, botões de prévia para computador e celular e a chave de status Active / Draft.

   

   A barra de ferramentas acima da prévia reúne o nome do banner, o idioma, o dispositivo de prévia e o status.

4. Monte o conteúdo

   Em Content, a Section 1 lista os elementos que compõem a barra. Clique em qualquer elemento para editar o texto e o estilo, arraste a alça à esquerda para reordenar ou use os ícones à direita da linha para ocultar, duplicar ou excluir.

   Clique em Add element para adicionar um novo:

   Elemento	O que ele adiciona
   Message	Uma linha de texto.
   Heading	Um título grande.
   Line break	Espaçamento vertical entre elementos.
   Button	Um botão de chamada para ação com link próprio.
   Countdown	Um cronômetro de dias / horas / minutos / segundos.
   Image	Uma imagem ou logotipo.

   

   Adicione, reordene e edite os elementos que compõem a barra.

5. (Opcional) Adicione mais grupos de conteúdo

   Clique em Add Group para criar a Section 2, a Section 3 e assim por diante. Cada seção é uma mensagem separada, e o banner alterna entre elas — controle o tempo em Animation nas próximas etapas.

   Deixe uma única seção se quiser apenas uma mensagem fixa.

6. Estilize a barra

   No painel Style:

   • Background Type — escolha Single Color, Gradient Color ou Pattern Image e defina a cor ou a imagem.
   • Font Style — defina a fonte, o tamanho, o peso e a cor do texto.
   • Padding — controle o espaçamento interno da barra.

   

   Defina o fundo, as fontes e o espaçamento de toda a barra.

7. Adicione um botão de fechar ou deixe a barra clicável

   As duas opções ficam no painel Button e vêm desativadas por padrão:

   • Marque Include Close Button para colocar um “x” na barra, para que quem compra possa dispensá-la. Dois campos aparecem: Color e Hover Color.
   • Marque Bar Clickable para transformar a barra inteira em um link. Um campo Link URL aparece — informe o destino e use a chave ao lado para abrir o link em uma nova guia.

   

   Ao marcar cada caixa, as configurações dela são exibidas — cores do botão de fechar ou a URL do link.

8. Defina o tempo da animação

   No painel Animation, escolha uma transição Horizontal ou Vertical e depois defina os tempos em segundos:

   Campo	O que ele controla
   Disappear After	Por quanto tempo a barra fica na tela antes de ser ocultada.
   Interval Between Bar Display	O intervalo até a barra reaparecer.
   Time For The Bar To Fade In	A duração da animação de entrada gradual.
   Time Per Group	Por quanto tempo cada seção é exibida antes de passar para a próxima.

   Nota

   Deixe um campo em 0 para desativar esse comportamento — por exemplo, Disappear After = 0 mantém a barra visível até quem compra fechá-la.

9. (Opcional) Adicione CSS personalizado

   Abra Advance Section para escrever seu próprio CSS na caixa Custom CSS (Developer Zone). A lista CSS reference logo abaixo mostra os seletores disponíveis — clique em um para inseri-lo.

10. Escolha onde o banner aparece

    Mude para a aba Placement e escolha uma posição de exibição:

    Posição	Comportamento
    Top	Empurra o conteúdo da página para baixo.
    Top Sticky	Empurra o conteúdo para baixo e continua visível ao rolar a página.
    Top Overlay	Sobrepõe o topo do conteúdo da página.
    Overlay Sticky	Sobrepõe o conteúdo e continua visível ao rolar a página.
    Bottom Sticky	Fixa na parte inferior da página.
    Custom	Posicione a barra em qualquer lugar usando um shortcode.

    Abaixo do seletor de posição, restrinja o público com Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions e Visibility date. O painel Shortcode fornece o trecho para colar no tema ao escolher Custom.

    Veja Configurar condições de exibição para o detalhamento completo de cada tipo de condição.

    

    Escolha uma posição de exibição e adicione condições para controlar quem vê o banner.

11. Salve e ative

    Defina a chave de status acima da prévia como Active e clique em Save no canto superior direito. Deixe em Draft para continuar trabalhando sem publicar.

    Cuidado

    Os banners só aparecem na sua loja virtual se a incorporação de app estiver ativada no tema. Veja Ativar o app no tema.

Próximos passos

• Configurar condições de exibição — defina regras detalhadas de segmentação para o banner.
• Criar um banner de rolagem infinita — experimente uma barra rolante no estilo letreiro.

Dica

Precisa de ajuda?

Se tiver qualquer dificuldade ao seguir estas etapas, entre em contato pelo e-mail [email protected].