Solucionar problemas de compilaciones de tienda
Diagnostica una vista previa de tienda en blanco, obsoleta, rota o visualmente incorrecta antes de publicarla.
Las capturas y grabaciones muestran la interfaz en inglés.
La vista previa es el lugar más seguro para encontrar problemas de tienda. No publiques hasta que las páginas e interacciones importantes funcionen allí.
Ruta de entrada: Tienda afectada → Tienda online → controles de vista previa.
Las anotaciones en inglés señalan los controles. Selecciona la imagen para ampliarla.
Utiliza la vista previa actual de Storefront y sus controles de dispositivo para reproducir la página afectada antes de publicar.
Antes de empezar
- Abre la tienda afectada e identifica la página y el ancho del dispositivo donde aparece el problema.
- Deja que la última tarea de Runner se complete antes de comparar su resultado con la vista previa.
- Usa la vista previa primero; no publiques un resultado roto o incierto como prueba.
Comienza en Tienda
- Abre la tienda afectada y selecciona Tienda online.
- Confirma que la vista previa muestre el proyecto esperado y la versión más reciente.
- Recarga la vista previa una vez.
- Verifica las vistas de dispositivos de escritorio y móvil.
- Abre la página afectada a través de la navegación de vista previa.
- Compara el resultado con la última tarea de Runner y el historial de versiones.
Problemas comunes
| Lo que ves | Qué verificar |
|---|---|
| Vista previa en blanco o con error | Espera a que se complete la compilación activa, recarga una vez e inspecciona la tarea actual para detectar un fallo. |
| Contenido antiguo | Confirma que la última tarea se completó y que la vista previa está en la versión más reciente. |
| El diseño se rompe en un ancho | Reprodúcelo con los controles del dispositivo e indica a Runner la página, sección y ancho. |
| Imagen faltante | Verifica la Biblioteca de medios, la selección de activos y si la imagen misma se carga. |
| El enlace abre la página incorrecta | Nombra el botón de origen y el destino previsto en una corrección enfocada. |
| El producto falta | Verifica que el producto exista y esté disponible para la tienda, no solo que la página se vea pulida. |
| El cambio del Modo de diseño está ausente | Confirma que la edición se guardó o se aplicó, luego reabre la misma página en vista previa. |
Controles útiles
| Control | Resultado |
|---|---|
| Actualizar vista previa | Recarga la vista previa actual sin publicarla. |
| Selector de dispositivo | Cambia el ancho de la vista previa para que puedas inspeccionar diseños responsivos. |
| Abrir vista previa o vista externa | Abre una vista previa más grande; no hace que la tienda sea pública. |
| Modo de diseño | Te permite seleccionar y ajustar el contenido visible de la tienda. |
| Historial de versiones | Muestra versiones guardadas y controles de restauración. La restauración cambia el estado del proyecto, así que revisa primero. |
Escala con evidencia útil
Incluye el nombre del proyecto, la página, el tamaño del dispositivo, el resultado esperado, el resultado visible, el estado de la última tarea y una captura de pantalla sin datos personales o de clientes.
Verifica la corrección
Después de que la tarea de reparación termine, recarga la misma página afectada y repite la interacción en el ancho de dispositivo original. Verifica un segundo ancho antes de publicar. Una página de inicio funcional por sí sola no es un punto de control de reparación para una página de producto o carrito rota.
Mira: compara anchos de dispositivo en la vista previa
La grabación cambia entre las vistas previas de PC, Pad y Teléfono. Demuestra cómo comparar anchos, no una reparación de errores o un cambio publicado.