ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

¿Quieres que tus popups coincidan perfectamente con la marca de tu tienda? 🎨

Mientras tanto Hoppy Popups incluye amplias opciones de personalización de diseño, Custom CSS le da control completo sobre ajustes avanzados de estilo que van más allá de la configuración estándar.

Ya sea que esté refinando la tipografía, ajustando el espaciamiento, creando efectos visuales únicos, o resolviendo conflictos de estilo temático específico, Custom CSS le permite personalizar sus popups exactamente de la manera que desee.

⚠️ Antes de empezar

Antes de utilizar CSS personalizado:

• Asegúrese de que su popup ya ha sido creado y salvado.
• Tener una comprensión básica de CSS o acceso a un desarrollador.
• Comprende que Custom CSS puede anular los ajustes de diseño estándar.

💡 Opciones de estilo estándar tales como colores, fuentes y espaciamiento ya están disponibles en la pestaña Diseño. Custom CSS está destinado a requisitos de estilo más avanzados.

🛠️ Paso 1 - Abra su configuración de Popup

Abrir el Hoppy Popups app de Shopify Admin.

Entonces:

➡️ Abre un popup existente.

➡️ O crear un nuevo popup si no lo has hecho ya.

Navegue a la Diseño tab.

Desplazarse hasta que encuentres Custom CSS sección.

🎨 Paso 2 - Abra la Sección de CSS Personalizada

Dentro del Custom CSS sección que encontrará:

• Un editor de CSS
• An Aplicar botón
• A Reset botón
• Una plantilla CSS de inicio

La plantilla incluye selectores de popup usados comúnmente, lo que hace fácil comenzar a personalizar su popup sin necesidad de identificar los nombres de clase manualmente.

✍️ Paso 3 - Agregue su CSS personalizado

El editor proporciona varios selectores listos para usar para estilizar elementos popup.

Selectores disponibles

Selector

Descripción

.futureblink-popup

Entire contenedor popup

.futureblink-popup .title

Título de la Popup

.futureblink-popup .description

Texto de la descripción del popup

.futureblink-popup .cta-button

Botón de llamada a acción

.futureblink-popup .close-btn

Cierre el botón

Selectores móviles

Para el estilo móvil específico, utilice el .mobile variación.

Selector

Descripción

.futureblink-popup.mobile

Contenedor de popup móvil

.futureblink-popup.mobile .title

Título móvil

.futureblink-popup.mobile .description

Descripción móvil

.futureblink-popup.mobile .cta-button

Botón móvil CTA

.futureblink-popup.mobile .close-btn

Botón de cierre móvil

Ejemplo CSS

Para personalizar el título popup y el botón 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;
}

💡 También puede añadir selectores adicionales, animaciones, consultas multimedia y otras reglas CSS válidas según sea necesario.

📱 Paso 4 - Añadir Mobile-Specific Styling

Para aplicar estilos sólo en dispositivos móviles, utilice el .mobile selectores.

Ejemplo:

.futureblink-popup.mobile .title {
font-size: 18px;
}

La aplicación se envuelve automáticamente .mobile selectores dentro de una consulta de medios móviles al renderizarlos en su escaparate.

Esto significa que no necesita crear manualmente puntos de ruptura móviles para estos selectores.

✅ Paso 5 - Aplica tu CSS

Una vez añadido su CSS:

➡️ Haga clic Aplicar.

Las actualizaciones de la vista previa automáticamente para que pueda revisar inmediatamente sus cambios de estilo.

⚠️ Simplemente pegar CSS en el editor no lo activa.

Debes hacer clic Aplicar antes de que los estilos se activan.

Si desea eliminar su estilo personalizado:

➡️ Haga clic Reset.

Esto restaura la plantilla predeterminada y desactiva el CSS personalizado.

👀 Paso 6 - Revisar la vista previa

Después de aplicar su CSS:

➡️ Revisa la vista previa del escritorio.

➡️ Revisa la vista previa móvil.

Verificar que:

• El texto muestra correctamente.
• Los botones siguen alineados.
• El espaciamiento parece consistente.
• Los efectos visuales se comportan como se espera.

Si se necesitan cambios:

➡️ Actualice el CSS.

➡️ Haga clic Aplicar otra vez.

La vista previa se actualiza automáticamente después de cada actualización.

💾 Paso 7 - Guardar y publicar

Una vez satisfecho con el diseño:

➡️ Haga clic Guardar.

➡️ Haga clic Publish.

⚠️ Salvar solo no actualiza tu escaparate.

El popup también debe publicarse antes de que los clientes puedan ver los cambios.

⚠️ Notas importantes

CSS controla los ajustes de diseño

CSS personalizado tiene precedencia sobre la mayoría de los ajustes de diseño estándar.

Si un entorno de diseño parece ser ignorado, es probable que sea superado por su CSS.

Manejo móvil es automático

La aplicación convierte automáticamente .mobile selectores en estilos móviles sensibles.

Esto hace que sea fácil mantener diseños separados de escritorio y móviles sin escribir consultas de medios personalizados.

Estilizado

Custom CSS se ve automáticamente al popup específico que se está editando.

Esto ayuda a prevenir conflictos de estilo con:

• Otros popups
• Elementos temáticos
• Otros contenidos de tienda

Reset Option

Clicking Reset elimina sólo el CSS personalizado.

No afecta:

• Ajustes de Popup
• Ajustes de diseño
• Plantillas
• Configuración de contenidos

CSS Validation

El editor no valida la sintaxis CSS.

Si un estilo no aparece correctamente:

➡️ Compruebe los nombres del selector.

➡️ Verifica los frenos y los semicolons.

➡️ Revise el CSS para errores de sintaxis.

❓ Solución de problemas

Si tus estilos no aparecen correctamente:

➡️ Confirmar que Aplicar ha sido pinchado.

➡️ Verificar el popup ha sido Guardado y Publicado.

➡️ Compruebe que los selectores coinciden exactamente con la plantilla proporcionada.

➡️ Prueba en una ventana Incognito o navegador privado.

➡️ Refresca el escaparate a los estilos de caché claros.

🎉 Resultado final

✅ Su popup se puede personalizar más allá de la configuración de diseño estándar.

✅ Las experiencias de escritorio y móviles se pueden estilo independientemente.

✅ Los efectos visuales avanzados y el estilo de marca se hacen posibles.

✅ Los estilos personalizados permanecen aislados al popup seleccionado.

Custom CSS proporciona la flexibilidad para crear una experiencia popup más pulida y coherente al tiempo que mantiene la simplicidad de las herramientas de diseño incorporadas de la aplicación. ✨

Actualizado el: 10/09/2026