> ## 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 configurar CSS personalizado para popups > ℹ️ **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. Queres que os teus popups combinem perfeitamente com a marca da tua loja? 🎨 Enquanto Hoppy Popups inclui extensas opções de personalização de design, **CSS Personalizado** dá-lhe controle completo sobre ajustes de estilo avançados que vão além das configurações padrão. Se você está refinando tipografia, ajustando o espaçamento, criando efeitos visuais únicos ou resolvendo conflitos de estilo específicos de temas, CSS personalizado permite que você personalize seus popups exatamente como você quer. --- # **⚠️ Antes de começar** Antes de usar CSS personalizado: * Certifique-se de que seu popup já foi criado e salvo. * Tenha uma compreensão básica de CSS ou acesso a um desenvolvedor. * Compreenda que CSS personalizado pode sobrepor configurações de design padrão. 💡 Opções de estilo padrão, como cores, fontes e espaçamento, já estão disponíveis na guia Design. CSS personalizado é destinado para requisitos de estilo mais avançados. --- # **🛠️ Passo 1 — Abra sua configuração instantânea** Abrir o **Hoppy Popups** aplicação de Shopify Admin. Depois: ➡️ Abre uma janela existente. ➡️ Ou criar um novo popup se você ainda não tiver. Navegar até o **Desenho** tab. Desça até localizar o **CSS Personalizado** secção. --- # **🎨 Passo 2 — Abra a seção CSS personalizada** Dentro da **CSS Personalizado** Seção que você vai encontrar: * Um editor de CSS * An **Aplicar** botão * A **Reiniciar** botão * Um modelo CSS inicial O modelo inclui seletores popup comumente usados, tornando fácil começar a personalizar o seu popup sem precisar identificar nomes de classe manualmente. --- # **✍️ Passo 3 — Adicione seu CSS personalizado** O editor fornece vários seletores prontos para usar para styling elementos popup. ### **Selectores Disponíveis** Seletor Designação das mercadorias `.futureblink-popup` Recipiente de contexto inteiro `.futureblink-popup .title` Título da janela `.futureblink-popup .description` Texto da descrição instantânea `.futureblink-popup .cta-button` Botão de chamada à ação `.futureblink-popup .close-btn` Fechar o botão --- ### **Selectores Móveis** Para styling mobile-specific, use o `.mobile` variação. Seletor Designação das mercadorias `.futureblink-popup.mobile` Recipiente de contexto móvel `.futureblink-popup.mobile .title` Título móvel `.futureblink-popup.mobile .description` Descrição móvel `.futureblink-popup.mobile .cta-button` Botão CTA móvel `.futureblink-popup.mobile .close-btn` Botão de fecho móvel --- ### **Exemplo CSS** Para personalizar o título popup e botão CTA: `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 Você também pode adicionar seletores adicionais, animações, consultas de mídia e outras regras CSS válidas conforme necessário. --- # **📱 Passo 4 — Adicionar um estilo específico para dispositivos móveis** Para aplicar estilos apenas em dispositivos móveis, use o `.mobile` Selectores. Exemplo: `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` A aplicação é automática `.mobile` Seletores dentro de uma consulta de mídia móvel ao renderizá-los em sua loja. Isso significa que você não precisa criar manualmente pontos de interrupção móveis para esses seletores. --- # **✅ Passo 5 — Aplique seu CSS** Uma vez que o seu CSS foi adicionado: ➡️ Clique **Aplicar**. As atualizações de visualização automaticamente para que você possa rever imediatamente suas alterações de estilo. ⚠️ Simplesmente colar CSS no editor não o ativa. Você deve clicar **Aplicar** antes que os estilos se tornem ativos. 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 do Desktop. ➡️ Reveja a pré-visualização do Mobile. Verificar que: * O texto exibe corretamente. * Os botões permanecem alinhados. * O espaçamento parece consistente. * Os efeitos visuais comportam-se como esperado. Se forem necessárias alterações: ➡️ Atualizar o CSS. ➡️ Clique **Aplicar** Outra vez. A antevisão atualiza automaticamente após cada atualização. --- # **💾 Passo 7 — Salvar e Publicar** Uma vez satisfeito com o design: ➡️ Clique **Gravar**. ➡️ Clique **Publicar**. ⚠️ Salvar sozinho não atualiza sua loja. O popup também deve ser publicado antes que os clientes possam ver as alterações. --- # **⚠️ Notas Importantes** ### **CSS Personalizado Sobrepõe as Configurações de Design** CSS personalizado tem precedência sobre a maioria das configurações de design padrão. Se uma configuração de design parece ser ignorada, é provável que esteja sendo substituída por seu CSS. --- ### **Manuseamento móvel é automático** O aplicativo converte automaticamente `.mobile` Selectores em estilos móveis responsivos. Isso torna mais fácil manter projetos de desktop e móveis separados sem escrever consultas de mídia personalizadas. --- ### **Styling Escondido** CSS personalizado é automaticamente escopo para o popup específico sendo editado. Isso ajuda a evitar conflitos de estilo com: * Outros popups * Elementos temáticos * Outro conteúdo à frente da loja --- ### **Repor a Opção** Clicando **Reiniciar** remove apenas o CSS Personalizado. Não afecta: * Configuração da janela * Configuração do desenho * Modelos * Configuração do conteúdo --- ### **Validação do CSS** O editor não valida a sintaxe do CSS. Se um estilo não estiver aparecendo corretamente: ➡️ Verifique os nomes do selector. ➡️ Verifique os suportes 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 janela de contexto **Gravado** e **Publicado**. ➡️ Verifique se os seletores 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** ✅ Seu popup pode ser personalizado além das configurações de design padrão. ✅ Experiências de desktop e móveis podem ser estilo independente. ✅ Efeitos visuais avançados e estilo específico da marca tornam-se possíveis. ✅ Os estilos personalizados permanecem isolados para o popup selecionado. CSS personalizado fornece a flexibilidade para criar uma experiência popup mais polida e consistente com a marca, mantendo a simplicidade das ferramentas de design integradas do aplicativo. ✨