> ## 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). # 🎨 Como definir CSS personalizado para o envio gratuito Upsell Bars > ℹ️ **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. Quer o seu Bar de Frete Grátis para combinar perfeitamente com a marca da sua loja? 🎨 Enquanto a guia Design inclui extensos controles de estilo, **CSS Personalizado** fornece flexibilidade adicional para personalização visual avançada. Se você está ajustando tipografia, refinando espaçamento, adicionando animações, criando layouts específicos para dispositivos móveis ou resolvendo conflitos de estilo específicos para temas, o Custom CSS lhe dá maior controle sobre como sua Barra de Envio Livre aparece na frente da loja. --- # **⚠️ Antes de começar** Antes de usar CSS personalizado: * Certifique-se de que você já criou uma configuração Upsell Frete Grátis. * Certifique-se de que você tem acesso ao **Desenho** tab. * Tenha uma compreensão básica de CSS ou acesso a um desenvolvedor. ⚠️ **Importante:** CSS personalizado está disponível em todos os tipos de colocação suportados, exceto **Página de Saída** colocações. As colocações apoiadas incluem: * Página do produto * Página do Carrinho * Gaveta de Carrinhos * Banner (Topo e Baixo) --- # **🛠️ Passo 1 — Abra a Página Desenho** Abrir o **Hoppy Free Shipping** app e navegue para a configuração Upsell Frete Grátis que você deseja personalizar. Depois: ➡️ Clique na **Desenho** tab. Desça até localizar o **CSS Personalizado** secção. Esta seção é tipicamente encontrada abaixo das configurações de Tipografia, Barra de Progresso, Botão e Upsell. --- # **🎨 Passo 2 — Abra o Editor CSS Personalizado** Dentro da **CSS Personalizado** Seção que você vai encontrar: * Um editor de CSS * A **Ver Guia** botão * An **Aplicar** botão * Um modelo CSS inicial O modelo contém seletores comumente usados que podem ser personalizados sem precisar inspecionar manualmente elementos de storefront. --- # **🎯 Etapa 3 — Entenda os Seletores Disponíveis** O modelo inicial inclui vários seletores que visam diferentes elementos da Barra de Frete Livre. ### **Selectores Disponíveis** Seletor Designação das mercadorias `.futureblink-free-shipping` Todo o recipiente de barra de transporte grátis `.futureblink-message` Texto da mensagem de progresso `.futureblink-icon` Ícone exibido com a mensagem `.futureblink-cta-button` Botão de chamada à ação `.futureblink-price-text` Valor de preço ou progresso destacados --- ### **Selectores Móveis** Para styling mobile-specific, use o `.mobile` variação. Seletor Designação das mercadorias `.futureblink-free-shipping.mobile .futureblink-message` Mensagem de progresso móvel `.futureblink-free-shipping.mobile .futureblink-icon` Ícone móvel `.futureblink-free-shipping.mobile .futureblink-cta-button` Botão CTA móvel `.futureblink-free-shipping.mobile .futureblink-price-text` Preço móvel/texto de progresso 💡 Você só precisa personalizar os seletores relevantes para seus requisitos de design. --- # **✍️ Passo 4 — Adicione seu CSS personalizado** Digite suas regras de CSS dentro do editor. ### **Exemplo 1 — Personalizar a Mensagem de Progresso** `.futureblink-free-shipping .futureblink-message {` `font-size: 18px;` `color: #ff6600;` `}` ### **Exemplo 2 — Personalizar o botão CTA** `.futureblink-free-shipping .futureblink-cta-button {` `background-color: #000000;` `color: #ffffff;` `border-radius: 20px;` `}` ### **Exemplo 3 — Styling móvel específico** `.futureblink-free-shipping.mobile .futureblink-message {` `font-size: 14px;` `}` 💡 Comece com pequenas mudanças de estilo primeiro, depois expanda o CSS conforme necessário. --- # **✅ Passo 5 — Aplique seu CSS** Depois de entrar em seu CSS: ➡️ Clique **Aplicar**. A antevisão actualiza automaticamente para que possa rever imediatamente as alterações de estilo. Se você quiser remover seu estilo personalizado: ➡️ Clique **Reiniciar**. Isso restaura o modelo padrão e desativa o CSS Personalizado. --- # **👀 Passo 6 — Reveja a Visualização** Depois de aplicar o seu CSS: ➡️ Reveja a visualização dentro do aplicativo. Verificar que: * O texto exibe corretamente. * Os botões aparecem como esperado. * Ícones permanecem alinhados. * Cores e espaçamento correspondem à sua marca. Se forem necessários ajustamentos: ➡️ Atualizar o CSS. ➡️ Clique **Aplicar** Outra vez. A antevisão atualiza automaticamente após cada alteração. --- # **💾 Passo 7 — Salvar e Publicar** Uma vez satisfeito com o design: ➡️ Clique **Gravar**. ➡️ Clique **Publicar**. ⚠️ Salvar sozinho não atualiza o storefront. A configuração Free Shipping Upsell também deve ser publicada antes que os clientes possam ver as alterações. --- # **⚠️ Notas Importantes** ### **Manuseamento Automático!importante** Quando os estilos são renderizados no storefront, o aplicativo adiciona automaticamente `!important` prioridade às declarações CSS. Isso ajuda a garantir que seus estilos personalizados tenham precedência sobre o estilo do tema. --- ### **Se não aparecerem estilos** Em casos raros onde os estilos de tema permanecem dominantes, você pode adicionar manualmente `!important` dentro do editor. Exemplo: .futureblink-free-shipping .futureblink-mensage { tamanho da fonte: 18px!important; cor: #ff6600!importante; } --- ### **Manuseamento móvel automático** Qualquer seletor usando o `.mobile` a variação é automaticamente enrolada dentro de uma consulta de mídia móvel quando renderizada na frente da loja. Você não precisa criar manualmente pontos de interrupção responsivos para estes seletores. --- ### **Limitação da Página de Obtenção** CSS personalizado não está disponível para colocações de página de checkout porque Shopify restringe a injeção personalizada de CSS em ambientes Checkout. --- ### **Validação do CSS** O editor não valida a sintaxe do CSS. Se um estilo não estiver se aplicando corretamente: ➡️ Verificar os nomes do seletor. ➡️ Verifica os aparelhos e pontos e vírgulas. ➡️ Reveja o CSS para erros de sintaxe. --- # **❓ Resolução de Problemas** Se seus estilos não estão aparecendo corretamente: ➡️ Confirmar que **Aplicar** foi clicado. ➡️ Verificar a configuração foi **Gravado** e **Publicado**. ➡️ Verifique se os nomes do seletor correspondem exatamente ao modelo fornecido. ➡️ Teste em uma janela de navegador Incógnito ou Privado. ➡️ Atualizar o storefront para limpar estilos em cache. --- # **🎉 Resultado Final** ✅ Sua barra de envio gratuita pode ser personalizada além das configurações de design padrão. ✅ Experiências de desktop e móveis podem ser estilo independente. ✅ Tipografia personalizada, espaçamento, cores e animações são totalmente suportados. ✅ O Free Shipping Bar pode ser alinhado mais de perto com a marca da sua loja. CSS personalizado fornece flexibilidade adicional quando os controles de design embutidos não são suficientes, ajudando a criar uma experiência mais polida e consistente na frente da loja. ✨