Design e posição
Estilize um Sale popup e decida onde ele flutua no computador e no celular.
A aba Design controla a aparência de um Sale popup e onde ele aparece. Ela se divide em fundo, posição, tamanho e fontes, com uma caixa de CSS personalizado no final.
A aba Design, com a prévia do popup ao lado.
Appearance and background
Seção intitulada “Appearance and background”Background style oferece três tipos de preenchimento:
| Estilo | O que você define |
|---|---|
| Solid fill | Uma Background color e uma Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 e uma Opacity |
| Image fill | Uma imagem enviada — PNG, JPEG ou JPG, com menos de 1 MB |
Junto com ele, você encontra Border settings — Border style (Solid, Dashed, Dotted), tamanho da borda, raio, cor e um botão Box shadow — além de Padding e Margin.
Position settings
Seção intitulada “Position settings”Onde o popup flutua. Computador e celular são configurados separadamente, cada um em sua aba.
Desktop
Seção intitulada “Desktop”- Show on desktop — ativa ou desativa a exibição no computador
- Desktop position — Top left, Top middle, Top right, Bottom left, Bottom middle ou Bottom right
- Animation type — Slide from top, Slide from bottom, Slide from left, Slide from right ou Fade in-out
- Margin top/bottom (px) e Margin left/right (px) — afastam o popup das bordas da tela
O mesmo conjunto: Show on mobile, Mobile position, animação e margens.
Como escolher uma posição
Seção intitulada “Como escolher uma posição”Bottom left é o padrão e a opção mais segura. Fica longe do cabeçalho, do carrinho e da barra fixa de Adicionar ao carrinho que a maioria dos temas coloca na parte inferior de uma página de produto no celular.
Vale verificar antes de optar por outra:
- Bottom right entra em conflito com widgets de chat ao vivo em muitas lojas.
- As posições Top podem cobrir barras de aviso e cabeçalhos fixos.
- As margens no celular importam mais do que as do computador — há muito menos espaço para o popup.
Size settings
Seção intitulada “Size settings”| Configuração | Opções |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Libera Mobile popup size e Mobile image size |
Ative a opção para celular em qualquer tamanho acima de Small. Um popup Large em um celular pode cobrir a maior parte da tela, que é a forma mais rápida de ele ser fechado sem ser lido.
Font family and font size
Seção intitulada “Font family and font size”- Use custom font — escolha uma família e um peso de fonte, ou herde os do tema
- Heading font size (px) e Content font size (px)
Combinar com a fonte do tema geralmente é o que faz um popup parecer parte da loja, e não algo acrescentado por fora.
Custom CSS
Seção intitulada “Custom CSS”Uma caixa Custom CSS (Developer Zone) no final da aba aceita CSS simples aplicado a este popup. Valem os mesmos cuidados de sempre — consulte CSS personalizado.
Como posicionar um popup dentro da página
Seção intitulada “Como posicionar um popup dentro da página”Por padrão, um popup flutua sobre a página na posição que você define aqui. Se você prefere que ele fique dentro da página — em uma seção, em um ponto fixo —, a aba Display tem um shortcode para isso, em Custom location to show popup:
<div class="samita-sales-popup" data-id="12345"></div>Copie-o e cole em um bloco de app Samita Countdown no editor de temas. Os passos são os mesmos das contagens regressivas — consulte Posicionar uma contagem regressiva com um shortcode.