Vista previa de tu tienda

Abre la vista previa actual de la tienda y verifica páginas y diseños responsivos antes de publicar.

Ruta de entrada: Espacio de trabajo → selecciona una tienda → Tienda

Vista previa y controles de la tienda Runner

Qué cubre esta guía

Revisa la tienda actual dentro de Runner, muévete entre sus páginas y verifica cómo se ve en diseños de escritorio, tableta y teléfono sin publicarla.

Por qué y cuándo usar Vista previa

Usa Vista previa después de que Runner cree o cambie la tienda. Es el lugar más seguro para detectar textos faltantes, rutas rotas, diseños móviles deficientes o secciones incompletas antes de que los clientes las vean.

La vista previa es independiente de la tienda publicada. Que una página se vea correcta aquí no demuestra que funcionen la URL pública, los datos del catálogo, el inventario, la conexión de pagos o el proceso de compra.

Disponibilidad y requisitos previos

Abre un proyecto con actividad de tienda existente o una versión previsualizable.
Si la página dice Sin tienda aún, usa el aviso en esa página para pedirle a Runner que construya la primera versión.
Si dice Construyendo la primera versión de tu tienda… o Preparando vista previa…, la vista previa aún no está lista.
Algunos espacios de trabajo usan la tienda más nueva basada en puntos de control. Los controles de versión exactos pueden variar con disponibilidad por etapas.

Cuando las tarjetas de versión de conversación condicional están habilitadas, seleccionar la imagen de tienda o Vista previa de la tarjeta de trabajo completada abre la versión exacta lista creada por esa tarea. Puede ser histórica en lugar de la más reciente. Para un proyecto más antiguo sin historial de versión guardado, Vista previa en la tarjeta de trabajo de tienda más reciente abre la vista previa en vivo actual en su lugar. Verifica las etiquetas v…, Versión actual y Publicado cuando estén disponibles antes de editar o iniciar publicación.

Que una tarea se complete o que la compilación del código fuente tenga éxito no significa por sí solo que la vista previa se haya actualizado. Runner promueve la tienda terminada después de que se completa la tarea. Si esa promoción falla, la vista previa conserva la versión anterior que se completó correctamente —o no muestra ninguna vista previa compilada si aún no existe una—; por eso, confirma la versión visible y el resultado de la vista previa.

Abre Vista previa

Abre tu espacio de trabajo de Runner.
Selecciona la tienda que quieres revisar.
Selecciona Tienda en la navegación del proyecto.
Espera hasta que la versión actual aparezca en el área de vista previa.

Si el proyecto aún no tiene tienda:

Ingresa lo que quieres en Describe la tienda que quieres construir….
Selecciona Comenzar a construir, o presiona Enter sin Shift.
Runner crea una conversación y envía esa descripción como la primera solicitud.
Si la creación falla, la descripción permanece en el campo para que puedas reintentar.

Controles de vista previa

Control	Por qué lo usas	Lo que sucede cuando lo seleccionas
Atrás	Regresa a la página anterior visitada dentro de la vista previa.	La vista previa se mueve hacia atrás en su propio historial de páginas. No sale de tu proyecto de Runner.
Adelante	Revisa una página después de ir atrás.	La vista previa se mueve hacia adelante cuando existe una entrada de historial posterior.
PC / Tableta / Teléfono	Verifica diseños responsivos.	Cada selección cambia el marco de vista previa al siguiente tamaño de dispositivo. No cambia la tienda en vivo.
Campo de ruta, como `/`	Abre una ruta de tienda conocida.	Selecciona la ruta, ingresa otra ruta en el mismo sitio de vista previa y presiona Enter. Las direcciones inválidas o externas se ignoran.
Actualizar	Recarga la vista previa actual después de un cambio o representación atascada.	Runner recarga la página visible y borra la selección de Modo de diseño activo y la sesión de deshacer/rehacer. Guarda primero los cambios de diseño pendientes.
Abrir en nueva pestaña	Revisa la vista previa con más espacio.	Runner abre esta URL de vista previa en otra pestaña del navegador. Esto sigue siendo una vista previa, no prueba de una tienda publicada.
Etiqueta de versión, como v1 · Actual	Identifica qué estás revisando.	La etiqueta distingue la versión actual más reciente de una vista previa histórica.
Modo de diseño	Comienza la edición visual.	Runner abre el espacio de trabajo de diseño cuando la versión más reciente es elegible.
Historial de versiones	Compara versiones anteriores de tienda.	Runner abre la lista de versiones sin cambiar la tienda actual.
Abrir editor de código	Inspecciona o edita la fuente de tienda cuando este control avanzado está disponible.	Runner abre el diálogo Editor de código de altura completa. Cerrarlo devuelve el panel Tienda a Vista previa; verifica el resultado visible allí.
Moneda / Ganar créditos gratis	Abre la oferta de referencia.	Runner abre el diálogo de referencia; no se ganan créditos simplemente por abrirlo.
Recuento de créditos / Mejorar	Revisa opciones de créditos, plan o uso.	Runner abre un menú emergente cuyas acciones disponibles pueden llevar a Facturación o Uso del espacio de trabajo.
Publicar, Publicar cambios o Republicar	Inicia el flujo de publicación apropiado para el estado actual.	Runner ejecuta verificaciones de acceso y disponibilidad antes de que comience cualquier publicación.

Revisa una página de tienda por página

Comienza en / y escanea el encabezado, área de anuncio, héroe, productos destacados, secciones y pie de página.
Selecciona cada enlace de navegación visible. Confirma que el destino aparece y la ruta de vista previa cambia como se esperaba.
Abre una página de producto desde la tienda. Confirma que su título, medios, precio, opciones, disponibilidad y control de compra sean visibles.
Usa el campo de ruta para rutas importantes que no están vinculadas desde la página actual.
Cambia entre PC, Tableta y Teléfono. Busca contenido recortado, controles superpuestos, texto ilegible y desplazamiento horizontal.
Selecciona Actualizar solo después de guardar cualquier cambio de Modo de diseño.
Registra cualquier problema en el chat de Runner con la ruta de página, tamaño de dispositivo y resultado esperado.

Estados, límites y solución de problemas

Lo que ves	Significado	Qué hacer
Sin tienda aún	Runner no encontró actividad de tienda existente ni una versión previsualizable guardada.	Pídele a Runner que cree la tienda.
Construyendo la primera versión…	La primera versión aún se está preparando.	Sigue el progreso de la tarea y espera un resultado terminal.
Preparando vista previa…	Runner está iniciando la vista previa seleccionada.	Mantén la página abierta; usa Actualizar solo si el estado deja de progresar.
Error al cargar la vista previa para esta versión	La versión seleccionada no pudo mostrarse.	Regresa a la versión actual, actualiza o reporta la versión y error a Runner.
Reconectando vista previa	Runner perdió la conexión de vista previa e intenta nuevamente.	Mantén el proyecto abierto y sigue el recuento de reintentos. Si no puede recuperarse, reconecta el espacio de trabajo.
Barra de error de vista previa con Arreglar	La vista previa reportó un error que Runner puede inspeccionar.	Selecciona Arreglar o Arreglar error para enviar el diagnóstico mostrado a Runner. Usa Mostrar más para expandir detalles y Descartar solo para ocultar el mensaje.
Un control está deshabilitado	La vista previa actualmente no admite esa acción, el espacio de trabajo está desconectado o Runner está trabajando.	Espera a Runner, reconecta el espacio de trabajo si se solicita, o regresa a la versión lista más reciente.
La vista previa se ve correcta pero la tienda en vivo no	Los cambios no han sido publicados o estás viendo versiones diferentes.	Verifica la etiqueta de versión, luego usa Publicar cambios.