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

Actualizado em: 10/09/2026