O separador Design dá-lhe controlo total sobre a aparência e a sensação da sua barra de anúncio em toda a loja. Desde cores de fundo e tipografia até animações de botões, estilo de ícones e CSS personalizado — quase todos os detalhes visuais podem ser afinados para corresponder à sua marca.

Pode lançar rapidamente com um modelo pré-fabricado ou personalizar cada pixel manualmente. De qualquer forma, a barra parecerá uma parte natural da sua loja 🎨

A maioria das definições relacionadas com a cor inclui:

• Um Color Picker (Seletor de Cores) para seleção visual
• Um Hex Code Input (Campo de Código Hexadecimal) para cores de marca exatas

⚠️ Antes de Começar

Para configurar as definições de Design:

→ Abra uma barra de anúncio existente
→ Ou crie uma nova primeiro

Depois, clique no separador Design dentro do editor.

ℹ️ Algumas opções aparecem apenas para tipos ou configurações específicas de barra. Por exemplo, as animações de deslize só aparecem para barras Multiple (Múltipla), e o estilo do cupão aparece apenas quando é utilizado um CTA Coupon (Cupão). Estes campos condicionais são assinalados abaixo para que saiba exatamente quando esperá-los.

🎨 Modelo

• O que faz: Aplica instantaneamente um estilo visual pré-fabricado à sua barra de anúncio.
• Como utilizar: Escolha entre mais de 25 modelos para dar um pontapé de saída ao seu design sem ter de preencher manualmente cada campo.

Cada modelo preenche previamente:

• Tipo de fundo, cor e definições de gradiente
• Cores e tamanhos do título e subtítulo
• Cores do botão, cor do texto e raio dos cantos
• Estilo da borda, do ícone e do cupão

Modelos disponíveis incluem: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Importante: Selecionar um modelo substituirá a maioria dos campos de design. As definições de Visibility (Visibilidade) e Position (Posição) (configuradas no separador Placement (Colocação)) são preservadas.

💡 Os modelos são ótimos para campanhas sazonais. Quer um visual de Black Friday? Selecione o modelo Black Friday e ajuste a partir daí.

👀 Visibilidade

• O que faz: Controla em que dispositivos a sua barra de anúncio aparece.
• Opções:
• • Desktop and Mobile (Computador e Telemóvel) — Visível em todos os dispositivos
  • Only Desktop (Apenas Computador)
  • Only Mobile (Apenas Telemóvel)

Isto é útil quando quer mensagens ou layouts diferentes para compradores em computador versus compradores em dispositivos móveis.

🖼️ Estilo de Fundo

• O que faz: Altera a aparência do fundo da barra de anúncio.
• Opções disponíveis:
• • Single Color (Cor Única) — Uma cor de fundo sólida
  • Gradient (Gradiente) — Duas cores misturadas num ângulo personalizado
  • Patterns (Padrões) — Padrões decorativos de fundo

🎨 Cor Única

• Escolha uma cor usando o Color Picker (Seletor de Cores) ou introduza manualmente um Hex Code (Código Hexadecimal).

🌈 Gradiente

• Gradient Angle Degree (Ângulo do Gradiente): Controla a direção da mistura (0–360°)
• Initial Color (Cor Inicial): A cor inicial
• Final Color (Cor Final): A cor final

💡 Um gradiente subtil pode adicionar profundidade sem ser distrator. Experimente ângulos de baixo contraste para um visual moderno.

✨ Padrões

Selecionar Patterns (Padrões) revela um menu pendente com mais de 35 opções de fundo incluídas:

• Decorativos: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Festivos e Sazonais: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Texturizados: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Os padrões são aplicados como estilos de fundo CSS. Alguns usam CSS puro; outros usam recursos de imagem.

📐 Bordas e Cantos

Esta secção controla a forma e o contorno da barra.

• Bar Corner Radius (px) (Raio dos Cantos da Barra): Quão arredondados são os cantos da barra
• Bar Padding (px) (Preenchimento da Barra): Espaço interno entre as bordas da barra e o seu conteúdo
• Border Size (px) (Espessura da Borda): Espessura da borda exterior
• Border Color (Cor da Borda): A cor da borda

💡 Um raio de canto de 0 cria uma barra retangular nítida. Valores mais altos criam formas mais suaves e modernas.

🔤 Tipografia

Esta secção controla como todo o texto aparece na barra de anúncio.

📝 Estilo do Título

• Title Size (px) (Tamanho do Título): O tamanho da mensagem principal
• Title Color (Cor do Título): A cor da mensagem principal

📄 Estilo do Subtítulo

• Subheading Size (px) (Tamanho do Subtítulo): O tamanho do texto de apoio
• Subheading Color (Cor do Subtítulo): A cor do texto de apoio

ℹ️ O campo de subtítulo fica oculto ao utilizar o tipo de barra Running (Em Execução), uma vez que as barras tipo letreiro (marquee) normalmente usam uma linha de texto.

🔠 Tipo de Letra

Escolha entre 63 tipos de letra disponíveis, incluindo:

• Fontes do sistema: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, e mais
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, e muitas mais

A primeira opção é Use your theme font (Usar a fonte do tema), que corresponde automaticamente à tipografia existente da sua loja.

💡 Para uma boa legibilidade, mantenha 1–2 tipos de letra por barra. Uma fonte de exibição arrojada para o título e uma sans-serif limpa para o subtítulo costumam funcionar bem.

🔘 Design do Botão

Esta secção personaliza o botão de chamada à ação.

ℹ️ Estas definições estão sempre disponíveis no separador Design. Afetam a loja apenas quando o tipo de CTA está definido como Button (Botão), Full Bar (Barra Completa) ou Trigger (Gatilho).

🎨 Cor do Botão

• Altera a cor de fundo do botão de CTA.

🔤 Tamanho e Cor do Texto do Botão

• Size (px) (Tamanho): Controla o tamanho do texto dentro do botão
• Color (Cor): Altera a cor do texto do botão

⭕ Raio dos Cantos e Estilo do Botão

Estes dois campos estão ligados:

• Corner Radius (px) (Raio dos Cantos): Introduza manualmente um valor para controlar o arredondamento
• Button Style (Estilo do Botão): Alterne rapidamente entre predefinições:
• • Square (Quadrado) → define o raio para 0 px
  • Rounded (Arredondado) → define o raio para 10 px
  • Fully Rounded (Totalmente Arredondado) → define o raio para 30 px

Quando seleciona uma predefinição de estilo, o raio dos cantos atualiza automaticamente. Quando introduz um raio personalizado, a predefinição de estilo atualiza para corresponder:

• 0–9 px → Square
• 10–29 px → Rounded
• 30+ px → Fully Rounded

💪 Peso da Fonte

• Controla quão arrojado ou leve o texto do botão aparece
• Opções: Normal, Bold, 100–900

✍️ Estilo da Fonte

• Alterne entre: Normal, Italic, Underline

✨ Animação do Botão

Adiciona uma animação contínua ao botão para o ajudar a destacar-se.

Animações disponíveis: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Animações subtis como Bounce ou Emitting chamam a atenção sem ser agressivas. Utilize Flip ou Tada para campanhas de alta urgência.

🏷️ Design do Cupão

Esta secção personaliza a aparência da caixa de código do cupão.

ℹ️ Esta secção aparece apenas quando:

• Qualquer diapositivo de conteúdo utiliza Coupon (Cupão) como tipo de CTA, ou
• O tipo de barra está definido como Email (E-mail)

Definições Disponíveis

• Coupon Border Style (Estilo da Borda do Cupão): Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, ou None
• Coupon Border Color (Cor da Borda do Cupão): A cor do contorno da caixa do cupão
• Coupon Text Color (Cor do Texto do Cupão): A cor do texto do código do cupão
• Coupon Background (Fundo do Cupão): A cor de fundo da caixa do cupão (suporta fundos transparentes)

💡 Uma borda tracejada com um fundo contrastante é o visual clássico de cupão. Experimente um fundo semi-transparente se quiser que o padrão ou gradiente da barra fique visível.

🎆 Animações da Barra

Transição de Barra Múltipla

Disponível apenas quando o tipo de barra está definido como Multiple (Múltipla).

Controla como os diapositivos transitam entre si:

• Slide (Deslize) — Desliza horizontalmente entre anúncios
• Fade In (Dissolver) — Desvanece suavemente de um diapositivo para o seguinte
• Cube (Cubo) — Um efeito de rotação 3D em cubo
• Flip (Virar) — Um efeito de transição tipo carta a virar

ℹ️ Esta definição encontra-se no separador Design, não no separador Content (Conteúdo).

🎨 Definições de Ícones

🚪 Cor do Ícone de Fechar

• Altera a cor do ícone do botão de fechar (dispensar).
• Só visível quando a opção Close Icon (Ícone de Fechar) está ativada no separador Content (Conteúdo).

➡️ Cor do Ícone de Seta

• Altera a cor das setas de navegação.
• Só visível quando o tipo de barra está definido como Multiple (Múltipla), uma vez que as setas são usadas para navegar entre diapositivos.

👥 Ícones do Banner (Ícones Sociais)

Esta secção estiliza os ícones de redes sociais que aparecem dentro da barra.

• Social Icon Size (px) (Tamanho do Ícone Social): Ajusta o tamanho do ícone
• Social Icon Color (Cor do Ícone Social): Altera a cor do ícone
• Social Icon Position (Posição do Ícone Social): Coloca os ícones no lado Left (Esquerdo) ou Right (Direito) da barra
• Use Original Social Icon Color (Usar Cor Original do Ícone Social): Quando ativado, cada plataforma mantém a sua cor de marca (azul do Facebook, gradiente do Instagram, etc.) em vez de utilizar a sua cor personalizada

ℹ️ Os ícones sociais são configurados no separador Content (Conteúdo). O separador Design apenas controla a sua aparência.

💻 CSS Personalizado (Para Utilizadores Avançados)

💡 Funcionalidade Avançada: Se precisar de estilos que não estão disponíveis nas definições padrão, pode escrever o seu próprio CSS diretamente no editor.

Quando ativado, é fornecido um esqueleto CSS com classes alvo pré-definidas:

• Recipiente de toda a barra: .futureblink-announcement-bar
• Texto do título: .futureblink-announcement-bar .title
• Texto do subtítulo: .futureblink-announcement-bar .subheading
• Título móvel: .futureblink-announcement-bar.mobile .title
• Subtítulo móvel: .futureblink-announcement-bar.mobile .subheading
• Botão CTA: .futureblink-announcement-bar .cta-button
• Botão CTA móvel: .futureblink-announcement-bar.mobile .cta-button
• Botão de fechar: .futureblink-announcement-bar .close-btn
• Setas de navegação: .futureblink-announcement-bar .arrow
• Botões Anterior/Seguinte: .futureblink-announcement-bar .button-prev e .button-next

Como funciona o CSS personalizado na loja:

• Todos os seletores são automaticamente delimitados à sua barra de anúncio específica
• Cada declaração recebe prioridade !important para sobrepor os estilos do tema
• Os seletores móveis (.mobile) são automaticamente envolvidos numa media query móvel
• O CSS é injetado como uma etiqueta <style> quando a barra é renderizada

⚠️ Por favor note: O CSS personalizado é poderoso, mas pode entrar em conflito com os estilos do tema. Teste exaustivamente em computador e dispositivos móveis após aplicar alterações.

🛒 Design de Checkout

Disponível apenas para barras de anúncio colocadas na Checkout Page (Página de Checkout) (requer Shopify Plus).

Quando o separador Placement (Colocação) está definido como Checkout Page (Página de Checkout), o separador Design completo é substituído por um painel simplificado:

• Checkout Title Size (Tamanho do Título de Checkout) — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color (Cor do Título de Checkout) — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size (Tamanho do Subtítulo de Checkout) — As mesmas opções de tamanho
• Checkout Subheading Color (Cor do Subtítulo de Checkout) — As mesmas opções de cor

ℹ️ O design de checkout utiliza os tokens de tom nativos da Shopify para um estilo consistente dentro do ambiente de checkout. Gradientes, padrões, botões e CSS personalizado não estão disponíveis nas barras de checkout.

🚀 Resultado Final

Depois de configurado com sucesso, as definições de Design & Styling (Design e Estilo) ajudam-no a criar uma barra de anúncio visualmente consistente e profissional que pareça uma parte natural da sua loja.

Com o estilo adequado:

✅ A barra alinha-se com as cores e a tipografia da sua marca
✅ As mensagens importantes tornam-se mais visíveis e legíveis
✅ Os botões e CTAs destacam-se sem ser invasivos
✅ Os padrões e gradientes de fundo adicionam personalidade visual
✅ As transições de diapositivos parecem suaves e polidas
✅ As experiências em dispositivos móveis e computador são otimizadas independentemente
✅ Utilizadores avançados podem estender o estilo com CSS personalizado

Utilizar eficazmente estas opções de design e estilo garante que cada barra de anúncio pareça intencional, alinhada com a marca e fácil de interagir para os clientes ✨

Actualizado em: 01/09/2026