> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Frete grátis Upsell Bar – Design e Styling > ℹ️ **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 ✨