Criar um banner de rolagem infinita

Um banner de rolagem infinita é uma barra cujo conteúdo se repete continuamente da direita para a esquerda, como um letreiro de notícias. Use-o para promoções recorrentes, avisos de frete grátis ou mensagens curtas que você quer que quem compra perceba.

Nota

Um banner de rolagem infinita tem uma única seção de conteúdo — não existe a opção Add Group. Se você precisa de várias mensagens que se alternam, use um banner básico.

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 Infinite Scroll

   Clique em Create banners. Na caixa de diálogo Select Type, clique em Select ao lado de Infinite Scroll — o tipo que repete o conteúdo do banner infinitamente para um efeito de rolagem contínua.

   

   Escolha Infinite Scroll para criar uma barra no estilo letreiro.

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 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. Edite o conteúdo rolante

   A Section 1 começa com um único elemento Description com um texto de exemplo, como ✨ Free ship on order $40+ ✨. Clique nele para abrir as configurações à direita:

   • Content — um editor de texto formatado com negrito, itálico, sublinhado, emoji, alinhamento e uma visualização em HTML (</>). A etiqueta de idioma mostra qual idioma você está editando.
   • Text — Size e Color da fonte.
   • Padding e Margin — espaçamento ao redor do elemento, em pixels.

   Clique em Add element para adicionar mais itens ao ciclo — Message, Heading, Line break, Button, Countdown ou Image — e arraste a alça à esquerda da linha para reordená-los.

   

   Edite o elemento que se repete pela barra ou adicione mais à sequência.

5. Estilize a barra

   No painel Style:

   • Background Type — escolha Single Color, Gradient Color ou Pattern Image. Os banners de rolagem infinita usam Pattern Image por padrão; use Change Image para trocar o padrão ou Remove para limpá-lo.
   • Font Style — defina a fonte, o peso e a cor padrão do texto.
   • Padding — controle o espaçamento interno da barra.

   Nota

   As imagens de padrão devem ser PNG, JPG ou SVG, com no máximo 5 MB e 512 × 512 px.

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

7. Defina a velocidade e o tempo da rolagem

   Os quatro campos do painel Animation são em segundos:

   Campo	O que ele controla
   Scroll speed	Quanto tempo leva um ciclo completo. Um número maior rola mais devagar.
   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.

   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.

   

   Scroll speed define a duração de um ciclo — aumente o valor para deixar o letreiro mais lento.

8. (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 — incluindo .samita_banner_groups.infinityScroll, o contêiner usado quando a rolagem infinita está ativada. Clique em um seletor para inseri-lo.

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

10. 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 — controle onde e para quem o banner aparece.
• Criar um banner básico — crie uma barra de avisos fixa ou alternada.

Dica

Precisa de ajuda?

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