ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

A guia Design lhe dá total controle sobre como o Free Shipping Upsell Bar parece e se sente em toda sua loja. Desde cores e espaçamento até tipografia, animações, botões e cartões upsell — quase todos os aspectos visuais podem ser personalizados para combinar com sua marca.

Nós fornecemos uma ampla gama de configurações para que você possa:

• Lançar rapidamente usando modelos prontos
• Ou personalizar profundamente cada detalhe para combinar perfeitamente com sua loja

A maioria das configurações relacionadas com as cores incluem:

• Um Selector de Cores
• Entrada de Código Hex

Isso torna mais fácil se você prefere a seleção visual ou cores exatas da marca.

⚠️ Antes de começar

Para configurar as configurações do Design:

→ Abra uma configuração de Upsell Frete Livre existente
→ Ou criar uma nova configuração primeiro

Depois:

• Pela Baseado na Colocação fluxo de trabalho

→ Abra o Desenho aba

• Pela Baseado em Objetivos fluxo de trabalho

→ Abra a guia de colocação que você deseja personalizar

ℹ️ As configurações de styling são acessadas de forma diferente dependendo do tipo de fluxo de trabalho utilizado.

🎨 Modelo

• O que faz: Permite-lhe aplicar instantaneamente um estilo visual pré-feito à sua Bar Upsell Frete Grátis.
• Como utilizar: Escolha entre os modelos disponíveis para iniciar rapidamente o seu design sem personalizar manualmente cada configuração.

👀 Visibilidade

• O que faz: Controla onde aparece o Bar Upsell de Frete Livre.
• Opções:
• • Desktop e Mobile – Visível em todos os dispositivos.
  • Apenas na área de trabalho
  • Apenas Móvel

📏 Largura da Barra

• O que faz: Controla a largura horizontal que a Barra de Frete Livre deve ocupar.
• Como utilizar: Aumentar ou diminuir a porcentagem de largura, dependendo de quão compacto ou largo você quer que a seção apareça.

🖼️ Estilo de Fundo

• O que faz: Muda a aparência de fundo da barra Upsell Frete Grátis.
• Opções disponíveis:
• • Cor Única – Aplicar uma cor de fundo sólida.
  • Gradiente – Misturar duas cores suavemente.
  • Padrões – Aplicar padrões decorativos de fundo.

🎨 Cor Única

• Escolha uma cor usando o Selector de Cores ou insira manualmente uma Código Hex.

🌈 Gradiente

• Grau de ângulo de gradiente: Controla a direção do efeito gradiente.
• Selector de cores 1 & 2: Selecione as duas cores usadas no gradiente.

✨ Padrões

• Activar a Selecionar padrão opção onde você pode escolher entre uma variedade de padrões de fundo embutidos.

📐 Contornos e Cantos

• Raio de fronteira (px): Controla como os cantos arredondados da seção aparecem.
• Tamanho da borda (px): Ajusta a espessura da borda.
• Cor da borda: Muda a cor da borda usando o seletor de cores ou entrada hex.

📏 Espaço

Esta seção ajuda você a controlar o espaçamento dentro e fora da Barra Upsell de Frete Livre.

• Fora de cima / inferior: Adiciona espaçamento fora da seção para separá- la dos elementos circundantes.
• Inside Top / Bottom: Adiciona espaçamento interno entre o conteúdo e as bordas da seção.

Aqui está o que o espaçamento externo/inside significa:

🎆 Adicionar animação de fogos de artifício

• O que faz: Adiciona um efeito de animação de fogos de artifício sutil quando os objetivos são alcançados.
• Opções:
• • Mostrar os fogos de artifício ligados todos os objetivos alcançados.
  • Mostrar fogos de artifício apenas no objetivo final.

🔤 Tipografia

Esta seção controla como todos os elementos de texto aparecem ao longo da Barra Upsell de Frete Livre.

📝 Mensagem Styling

• Tamanho da mensagem: Ajusta o tamanho do texto da mensagem principal.
• Cor da mensagem: Muda a cor da mensagem mostrada acima da barra de progresso.

🎉 Cor da Mensagem do Objetivo

• Muda a cor da mensagem de sucesso exibida após um objetivo ser alcançado.

🔠 Fonte

• Escolha entre fontes disponíveis ou selecione Usar o seu tipo de letra de tema para corresponder automaticamente ao tema da sua loja.

💪 Peso da Fonte

• Controla quão arrojado ou leve o texto aparece.
• Você também pode selecionar Herdeira para acompanhar o peso da fonte existente do seu tema.

💰 Preço Texto Styling

Personalize como a quantidade de preço aparece dentro da mensagem.

• Tamanho: Controla o tamanho da fonte do preço destacado.
• Cor: Muda a cor do texto do preço.

✨ Preço Animação de Texto

• Adiciona efeitos de animação ao texto de preço para ajudá-lo a se destacar mais.

📊 Barra de Progresso

Esta seção permite personalizar a aparência e o comportamento da barra de progresso.

👁️ Mostrar a Barra de Progresso

• Activa ou desactiva a visibilidade da barra de progresso.

🎨 Cor de Fundo

• Muda a cor de fundo da barra de progresso não preenchida.

🟩 Preencher cor

• Controla a cor da seção de progresso preenchida.

🎯 Marcador de Alvos Múltiplos

Escolha como vários objetivos são exibidos dentro da barra de progresso.

• Mostrar apenas um objetivo de cada vez – Reinicia a barra depois de atingir um objetivo para focar no próximo.
• Mostrar todos os objetivos ao mesmo tempo – Mostra todos os marcos de meta juntos dentro da mesma barra.

Exemplo:

📦 Estilo da Barra

• Selecione entre os estilos visuais disponíveis para a barra de progresso.

📐 Largura

• Controla a largura da barra de progresso em si.

⭕ Raio de Canto

• Ajusta como os cantos arredondados da barra de progresso aparecem.

📏 Altura

• Controla a espessura/altura da barra de progresso.

Espaço acima / abaixo

• Ajusta o espaçamento acima e abaixo da barra de progresso.

🔘 Desenho de Botão

Esta seção personaliza o botão CTA mostrado ao lado da mensagem Frete Livre.

Nota: Esta secção só se aplica quando Botão é selecionado como o Tipo de Chamada à Ação na página do Objectivo.

🎨 Cor do Botão

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

🔤 Tamanho e cor do texto do botão

• Controla o tamanho do texto e a cor dentro do botão.

⭕ Raio de Canto

• Ajusta como os cantos arredondados do botão aparecem.

📦 Estilo do Botão

• Mudar rapidamente entre estilos como:
• • Quadrado
  • Arredondado
  • Totalmente arredondada

💪 Peso da Fonte

• Controla a espessura do texto do botão.

✍️ Estilo da Fonte

• Alternar entre:
• • Normal
  • Itálico
  • Sublinhado

✨ Estilo de Animação de Botão

• Adiciona efeitos de animação contínua ao botão.

🖱️ Efeitos de Hover de Botão

• Adiciona efeitos interativos quando os usuários pairam sobre o botão.

🛍️ Desenho de Upsell

Esta seção personaliza a aparência da seção Upsell.

Nota: Esta secção só se aplica quando uma opção Upsell que não Nenhum Upsell é selecionado na aba Upsell/Placement.

🔤 Tipografia

🏷️ Upsell Title

• Tamanho do Título: Controla o tamanho da direcção Upsell.
• Cor do Título: Muda a cor do cabeçalho Upsell.

📦 Denominação do produto

• Tamanho do Título do Produto: Controla o tamanho do nome do produto.
• Cor do Título do Produto: Muda a cor do título do produto.

💰 Preço Styling

• Tamanho do preço: Controla o tamanho do texto do preço do produto.
• Cor do preço: Muda a cor do preço do produto.

➡️ Seta Styling

• Tamanho da Seta: Controla o tamanho das setas de navegação.
• Cor da Seta: Muda a cor da seta.

🔘 Adicionar ao Carrinho Styling Botão

• Cor do Botão: Muda a cor de fundo do botão.
• Tamanho do Texto do Botão & Cor: Controla a aparência do texto.
• Raio de Canto: Ajusta a arredondamento do botão.
• Estilo do Botão: Selecione entre os estilos de botões disponíveis.
• Peso da fonte: Controla a espessura do texto.
• Estilo da fonte: Alterna entre diferentes estilos de texto.

💻 CSS personalizado (para desenvolvedores)

💡Funcionalidade Avançada: Se você quiser adicionar estilo completamente único que não está disponível nas configurações padrão, você pode colar seu CSS personalizado diretamente na caixa do editor.

• Classes-alvo fornecidas:
• • Container inteiro do distintivo: .futureblink-free-shipping
  • Mensagem de progresso: .futureblink-free-shipping .futureblink-message
  • Ícone acima da barra Progresso: .futureblink-free-shipping .futureblink-icon
  • Botão de chamada para ação: .futureblink-free-shipping .futureblink-cta-button
• Clique Aplicar para testar seus estilos imediatamente.

«⚠️ Por favor, note: Se os estilos não forem aplicados após clicar em Aplicar, tente novamente adicionando !important a cada declaração.

🎯 Configuração do Ícone

Adicionar e personalizar um ícone exibido acima da barra de progresso.

🖼️ Selecionar / Remover Ícone

• Abra a Biblioteca de Ícones incorporada para escolher um ícone.
• Remover o ícone seleccionado de momento a qualquer momento.

📤 Enviar Ícone

• Envie seu próprio ícone personalizado para completa flexibilidade.

📏 Tamanho e cor do ícone

• Ajuste o tamanho do ícone e mude sua cor.

🚀 Resultado Final

Uma vez configurado com sucesso, o Desenho & Styling configurações ajudam os comerciantes a criar uma experiência de compras mais visualmente envolvente, profissional e focada na conversão.

Com personalização de estilo adequado no lugar:

✅ O Free Shipping Bar se sente mais alinhado com sua marca de loja
✅ Mensagens importantes tornam-se mais perceptíveis e envolventes
✅ Rastreamento de progresso parece mais limpo e mais fácil de entender
✅ Os botões CTA tornam-se mais atraentes visualmente
✅ Seções Upsell misturam mais naturalmente na frente da loja
✅ Os clientes experimentam uma interface mais polida e interativa
✅ Mercadores ganham melhor controle sobre a aparência geral e experiência do usuário

Usando estas opções de design e estilo de forma eficaz pode melhorar muito o engajamento do cliente, apresentação storefront e potencial de conversão global ✨

Actualizado em: 10/09/2026