ℹ️ 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. ✨

Actualizado em: 10/09/2026