---
title: Visualize sua loja
description: Abra a visualização atual da vitrine e verifique páginas e layouts responsivos antes de publicar.
---

**Caminho de entrada:** Workspace → selecione uma loja → **Vitrine**

![Prévia e controles da loja Runner](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgkyhbRgjXIfFwWx7Qu1lJBZMSPHcazYdR0voC)

## O que este guia cobre

Revise a vitrine atual dentro do Runner, mova-se entre suas páginas e verifique como ela se parece em layouts de desktop, tablet e telefone sem publicá-la.

## Por que e quando usar Visualização

Use Visualização depois que o Runner cria ou altera a vitrine. É o lugar mais seguro para detectar cópia ausente, rotas quebradas, layouts móveis ruins ou seções inacabadas antes que os clientes as vejam.

A Visualização é separada da loja ao vivo. Uma página que parece correta aqui não prova que a URL pública, dados do catálogo, inventário, conexão de pagamento ou checkout funciona.

## Disponibilidade e pré-requisitos

- Abra um projeto com atividade de vitrine existente ou uma versão visualizável.
- Se a página disser **Nenhuma vitrine ainda**, use o prompt nessa página para pedir ao Runner para construir a primeira versão.
- Se disser **Construindo a primeira versão de sua vitrine…** ou **Preparando visualização…**, a visualização ainda não está pronta.
- Alguns workspaces usam a vitrine mais recente baseada em checkpoint. Os controles de versão exatos podem variar com disponibilidade em estágios.

Quando os cartões condicionais de versão da conversa estão habilitados, selecionar a imagem da vitrine ou **Visualização** em um cartão de trabalho concluído abre a versão pronta criada por essa tarefa. Ela pode ser histórica, e não a mais recente. Em um projeto mais antigo sem histórico de versões salvo, **Visualização** no cartão de trabalho mais recente da vitrine abre a visualização ao vivo atual. Verifique os rótulos **v…**, **Versão Atual** e **Publicado**, quando disponíveis, antes de editar ou iniciar a publicação.

Uma tarefa concluída ou uma compilação bem-sucedida do código-fonte não significa, por si só, que a Visualização foi atualizada. O Runner promove a vitrine concluída depois que a tarefa termina. Se essa promoção falhar, a Visualização mantém a versão anterior bem-sucedida — ou não mostra nenhuma visualização compilada quando ainda não existe uma —; portanto, confirme a versão visível e o resultado da visualização.

## Abra Visualização

1. Abra seu workspace do Runner.
2. Selecione a loja que deseja revisar.
3. Selecione **Vitrine** na navegação do projeto.
4. Aguarde até que a versão atual apareça na área de visualização.

Se o projeto não tiver vitrine ainda:

1. Digite o que você quer em **Descreva a loja que você quer construir…**.
2. Selecione **Começar a construir** ou pressione **Enter** sem Shift.
3. O Runner cria uma conversa e envia essa descrição como a primeira solicitação.
4. Se a criação falhar, a descrição permanece no campo para que você possa tentar novamente.

## Controles de visualização

| Controle | Por que você o usa | O que acontece quando você o seleciona |
| --- | --- | --- |
| **Voltar** | Retorne à página anterior visitada dentro da visualização. | A visualização se move para trás em seu próprio histórico de página. Não sai do seu projeto do Runner. |
| **Avançar** | Revise uma página após voltar. | A visualização avança quando uma entrada de histórico posterior existe. |
| **PC / Pad / Telefone** | Verifique layouts responsivos. | Cada seleção alterna o quadro de visualização para o próximo tamanho de dispositivo. Não altera a vitrine ao vivo. |
| Campo de caminho, como `/` | Abra uma rota de vitrine conhecida. | Selecione o caminho, digite outro caminho no mesmo site de visualização e pressione **Enter**. Endereços inválidos ou externos são ignorados. |
| **Atualizar** | Recarregue a visualização atual após uma mudança ou renderização travada. | O Runner recarrega a página visível e limpa a seleção do Modo de Design ativo e a sessão de desfazer/refazer. Salve as alterações de design pendentes primeiro. |
| **Abrir em nova guia** | Revise a visualização com mais espaço. | O Runner abre esta URL de visualização em outra guia do navegador. Esta ainda é uma visualização, não prova de uma loja publicada. |
| Rótulo de versão, como **v1 · Atual** | Identifique o que você está revisando. | O rótulo distingue a versão atual mais recente de uma visualização histórica. |
| **Modo de Design** | Comece a edição visual. | O Runner abre o workspace de design quando a versão mais recente é elegível. |
| **Histórico de Versão** | Compare versões anteriores de vitrine. | O Runner abre a lista de versão sem alterar a vitrine atual. |
| **Abrir editor de código** | Inspecione ou edite a fonte da vitrine quando este controle avançado estiver disponível. | O Runner abre o diálogo **Editor de código** em altura total. Fechá-lo retorna o painel Vitrine para Visualização; verifique o resultado visível lá. |
| Moeda / **Ganhe créditos grátis** | Abra a oferta de referência. | O Runner abre o diálogo de referência; nenhum crédito é ganho apenas abrindo-o. |
| Contagem de crédito / **Atualizar** | Revise opções de crédito, plano ou uso. | O Runner abre um popover cujas ações disponíveis podem levar ao Faturamento ou Uso do workspace. |
| **Publicar**, **Publicar Alterações** ou **Republicar** | Inicie o fluxo de publicação apropriado para o estado atual. | O Runner executa verificações de acesso e prontidão antes de qualquer publicação começar. |

## Revise uma página de vitrine por página

1. Comece em `/` e digitalize o cabeçalho, área de anúncio, herói, produtos em destaque, seções e rodapé.
2. Selecione cada link de navegação visível. Confirme se o destino aparece e o caminho de visualização muda conforme esperado.
3. Abra uma página de produto da vitrine. Confirme se seu título, mídia, preço, opções, disponibilidade e controle de compra são visíveis.
4. Use o campo de caminho para rotas importantes que não estão vinculadas da página atual.
5. Alterne entre **PC**, **Tablet** e **Telefone**. Procure por conteúdo recortado, controles sobrepostos, texto ilegível e rolagem horizontal.
6. Selecione **Atualizar** apenas após salvar as alterações do Modo de Design.
7. Registre qualquer problema no chat do Runner com o caminho da página, tamanho do dispositivo e resultado esperado.

## Estados, limites e solução de problemas

| O que você vê | Significado | O que fazer |
| --- | --- | --- |
| **Nenhuma vitrine ainda** | O Runner não encontrou atividade de vitrine existente nem uma versão visualizável salva. | Peça ao Runner para criar a vitrine. |
| **Construindo a primeira versão…** | A primeira versão ainda está sendo preparada. | Acompanhe o progresso da tarefa e aguarde um resultado terminal. |
| **Preparando visualização…** | O Runner está iniciando a visualização selecionada. | Mantenha a página aberta; use **Atualizar** apenas se o estado parar de progredir. |
| **Falha ao carregar a visualização para esta versão** | A versão selecionada não pôde ser exibida. | Retorne à versão atual, atualize ou relate a versão e o erro ao Runner. |
| **Reconectando visualização** | O Runner perdeu a conexão de visualização e está tentando novamente. | Mantenha o projeto aberto e acompanhe a contagem de tentativas. Se não conseguir recuperar, reconecte o workspace. |
| Barra de erro de visualização com **Corrigir** | A visualização relatou um erro que o Runner pode inspecionar. | Selecione **Corrigir** ou **Corrigir erro** para enviar o diagnóstico exibido ao Runner. Use **Mostrar mais** para expandir detalhes e **Descartar** apenas para ocultar a mensagem. |
| Um controle está desabilitado | A visualização não suporta essa ação no momento, o espaço de trabalho está desconectado ou o Runner está trabalhando. | Aguarde o Runner, reconecte o espaço de trabalho se solicitado ou retorne à versão pronta mais recente. |
| A visualização parece correta, mas a loja ao vivo não | As alterações não foram publicadas ou você está visualizando versões diferentes. | Verifique o rótulo de versão e, em seguida, use [Publicar Alterações](./publish-and-republish). |

## Guias relacionados

- [Use Modo de Design](./design-mode)
- [Editar conteúdo, páginas e mídia](./edit-content-pages-and-media)
- [Inspecione e edite código de vitrine](./inspect-and-edit-code)
- [Use histórico de versão](./version-history)
- [Prepare-se para publicar](./prepare-to-publish)