Ver categorías

¿Cómo Añadir Popup Personalizado en Shopify?

Para añadir una ventana emergente personalizada en Shopify, puede seguir estos pasos:

1. Inicie sesión en su panel de administración de Shopify.
2. Vaya a la sección "Tienda online" y haga clic en "Temas".
3. En la página "Temas", haga clic en el botón "Acciones" y seleccione "Editar código" en el menú desplegable.
4. En el editor de código, localice la carpeta "Layout" y haga clic sobre ella para expandirla.
5. Busque el archivo "theme.liquid" y haga clic en él para abrirlo.
6. Desplácese hacia abajo para encontrar la `y añada el siguiente código justo antes de la etiqueta de cierre `.`etiqueta:

"`html

“`

7. Guarde los cambios en el archivo "theme.liquid".
8. Ahora, vuelva a la carpeta "Layout" y haga clic en el archivo "theme.scss.liquid" para abrirlo.
9. Desplácese hasta la parte inferior del archivo y añada lo siguiente CSS código:

"`css
#custom-popup {
posición: fija;
superior: 50%;
izquierda: 50%;
transformar: translate(-50%, -50%);
color de fondo: #fff;
acolchado: 20px;
z-index: 9999;
/* Añade cualquier otro estilo que desees para tu ventana emergente */
}
“`

10. Guarde los cambios en el archivo "theme.scss.liquid".
11. Ahora, puedes personalizar el contenido de tu ventana emergente añadiendo HTML y CSS dentro del `

` en el archivo "theme.liquid".
12. Para activar la ventana emergente, puede utilizar JavaScript o jQuery. Por ejemplo, puede añadir el siguiente código justo antes del cierre `.` en el archivo "theme.liquid":

"`html

“`

13. Guarde los cambios en el archivo "theme.liquid".
14. Por último, puede previsualizar su tienda y probar la ventana emergente personalizada activando el evento especificado en el código JavaScript (por ejemplo, haciendo clic en un botón