Diseño y posición
Da estilo a un popup de ofertas y decide dónde flota en ordenador y en móvil.
La pestaña Design controla el aspecto de un popup de ofertas y dónde aparece. Se divide en fondo, posición, tamaño y fuentes, con un cuadro de CSS personalizado al final.
La pestaña Design, con la vista previa del popup al lado.
Aspecto y fondo
Sección titulada «Aspecto y fondo»Background style ofrece tres tipos de relleno:
| Estilo | Qué estableces |
|---|---|
| Solid fill | Un Background color y una Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 y una Opacity |
| Image fill | Una imagen subida: PNG, JPEG o JPG, de menos de 1 MB |
Junto a él encontrarás Border settings (Border style con Solid, Dashed y Dotted, tamaño del borde, radio, color y un interruptor de Box shadow), además de Padding y Margin.
Ajustes de posición
Sección titulada «Ajustes de posición»Dónde flota el popup. Ordenador y móvil se configuran por separado, en sus propias pestañas.
Ordenador
Sección titulada «Ordenador»- Show on desktop: activa o desactiva la visualización en ordenador
- Desktop position: Top left, Top middle, Top right, Bottom left, Bottom middle o Bottom right
- Animation type: Slide from top, Slide from bottom, Slide from left, Slide from right o Fade in-out
- Margin top/bottom (px) y Margin left/right (px): separan el popup de los bordes de la pantalla
El mismo conjunto: Show on mobile, Mobile position, animación y márgenes.
Elegir una posición
Sección titulada «Elegir una posición»Bottom left es la predeterminada y la más segura. No estorba al encabezado, al carrito ni a la barra fija de «Agregar al carrito» que la mayoría de los temas colocan en la parte inferior de una página de producto en móvil.
Conviene comprobar esto antes de decidirte por otra:
- Bottom right choca con los widgets de chat en directo en muchas tiendas.
- Las posiciones Top pueden tapar barras de anuncios y encabezados fijos.
- Los márgenes en móvil importan más que los de ordenador: hay mucho menos espacio para el popup.
Ajustes de tamaño
Sección titulada «Ajustes de tamaño»| Ajuste | Opciones |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Desbloquea Mobile popup size y Mobile image size |
Activa la opción de móvil para cualquier tamaño superior a Small. Un popup Large en un teléfono puede cubrir la mayor parte de la pantalla, que es la forma más rápida de que se cierre sin leerse.
Familia y tamaño de fuente
Sección titulada «Familia y tamaño de fuente»- Use custom font: elige una familia y un grosor de fuente, o hereda los de tu tema
- Heading font size (px) y Content font size (px)
Igualar la fuente de tu tema suele ser lo que hace que un popup parezca parte de la tienda y no algo añadido a posteriori.
CSS personalizado
Sección titulada «CSS personalizado»Un cuadro Custom CSS (Developer Zone) al final de la pestaña admite CSS sin formato que se aplica a este popup. Rigen las mismas precauciones que en el resto de la aplicación: consulta CSS personalizado.
Colocar un popup dentro de la página
Sección titulada «Colocar un popup dentro de la página»De forma predeterminada, un popup flota sobre la página en la posición que establezcas aquí. Si prefieres que esté dentro de la página, en una sección y en un punto fijo, la pestaña Display tiene un shortcode para ello, en Custom location to show popup:
<div class="samita-sales-popup" data-id="12345"></div>Cópialo y pégalo en un bloque de aplicación Samita Countdown en tu editor de temas. Los pasos son los mismos que para las cuentas regresivas: consulta Colocar una cuenta regresiva con un shortcode.