{"section":"troubleshooting","requestedLocale":"pt","requestedSlug":"o-front-end-da-minha-loja-apresenta-problemas-de-layout","locale":"pt","slug":"o-front-end-da-minha-loja-apresenta-problemas-de-layout","path":"docs/pt/troubleshooting/acesso-a-dados-e-segurança/o-front-end-da-minha-loja-apresenta-problemas-de-layout.md","branch":"main","content":"Este artigo ajuda você a investigar problemas de layout no front-end de sua loja. Ao seguir as instruções deste guia, você poderá comparar diferentes versões da vitrine, isolar a origem dos problemas de layout e reunir evidências para compartilhar com o Suporte VTEX ou com seu parceiro de implementação, caso necessário.\n\n## Solução\n\nPara investigar problemas de layout, considere as seguintes soluções:\n\n* **[Bloqueando customizações para isolar problemas de front-end](#bloqueando-customizações-para-isolar-problemas-de-front-end):** desative temporariamente as customizações para verificar se o problema é causado por código customizado.\n* **[Comparando diferentes versões do front-end de sua loja](#comparando-versões-do-front-end):** compare o layout atual de sua loja com uma versão alternativa para verificar se o problema está relacionado a alguma customização específica.\n\n### Bloqueando customizações para isolar problemas de front-end\n\nEssa solução ajuda a verificar se um problema de front-end é causado por código customizado (por exemplo, JavaScript, CSS ou script de terceiros), pois, ao bloquear customizações temporariamente, você testa a loja apenas com o comportamento nativo da VTEX.\n\nPara executar esse teste, você deve remover as customizações por meio da ferramenta de desenvolvimento nativa do próprio navegador. Aqui mostraremos como fazer no navegador Google Chrome, com a ferramenta **DevTools**.\n\nPara configurar o [Chrome DevTools](https://developer.chrome.com/docs/devtools/), siga os passos a seguir. \n\n1. Abra o [Google Chrome](https://www.google.com/intl/pt-BR/chrome/) no seu computador.\n2. Clique no botão `F12` do seu teclado ou clique com o botão direito do mouse em qualquer parte da tela e selecione **Inspecionar**.\n3. Clique nos três pontos verticais na parte superior direita da página, conforme indicado na imagem abaixo.\n4. Selecione **Mais ferramentas** e, em seguida, **Condições de solicitação** para bloquear todas as customizações feitas por meio de CSS, JavaScript e Google Tag Manager. \n\n  ![legado-02](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/shopping/legado-02.png)\n\n5. Na aba **Condições de solicitação**, clique em `Adicionar regra` para definir o primeiro recurso a ser bloqueado. Para adicionar mais recursos, clique em `+` e, depois de definir, clique em `Adicionar`. Essa configuração precisa ser feita apenas uma vez no seu navegador. Inclua os itens abaixo:\n\n * `*:/arquivos/*.js`\n * `*:/files/*js`\n * `*:/arquivos/*.css`\n * `*:/files/*.css`\n * `*://www.googletagmanager.com/gtm.js*`\n\n  ![request-conditions-02](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/shopping/request-conditions-02.png)\n\n6. Marque a opção **Ativar bloqueio e limitação** e habilite todos os checkboxes ao lado de cada recurso configurado. Essa será a configuração padrão, com todas as opções habilitadas para bloqueio.\n7. Agora, atualize a página. Ela será exibida sem os componentes customizados.\n\nPara voltar a visualizar as customizações, desmarque a opção **Ativar bloqueio e limitação** e atualize a página.\n\nVerifique se o comportamento indesejado que você observou originalmente ocorre apenas com a customização ativa. Se for o caso, entre em contato com o time responsável pelo seu front-end para que verifique o que está ocorrendo.\n\nSe, mesmo com as customizações bloqueadas, o comportamento indesejado persistir, abra um chamado ao [suporte da VTEX](https://supporticket.vtex.com/support).\n\n### Comparando versões do front-end\n\nEssa solução deve ser utilizada quando você deseja testar a URL da página com problema no layout nativo da VTEX ou com um layout diferente do atual, alterando o template ou os controles. Para realizar esse teste, siga os passos abaixo:\n\n1. No Admin VTEX, acesse **Storefront > Layout > CMS** e crie um novo template em **HTML Templates**. É importante que o novo template seja do mesmo tipo que o template atual utilizado na página com o problema. Por exemplo, se o problema ocorre em uma página de categoria, você deve criar um novo template de categoria. Para mais detalhes sobre como criar um template, veja o guia [Criar e editar um template de página](https://help.vtex.com/pt/docs/tutorials/como-criar-um-template-de-pagina).\n2. No template criado, mantenha a estrutura básica do layout e use apenas os [controles nativos](https://developers.vtex.com/docs/guides/list-of-controls-for-templates) necessários para renderizar a página.\n3. Acesse a área de layouts em **CMS > Sites and Channels** e localize a pasta da página com problema. Por exemplo, se o problema é em uma página de categoria, você deve:\n   * Clicar no website desejado.\n   * Clicar na pasta raiz (`/`).\n   * Clicar na pasta **Categoria > @categoria@**.\n   * Na janela ao lado, clique em `new layout` para criar um novo layout.\n5. Associe o template criado ao novo layout. Para mais detalhes, veja o guia [Associando um template a um layout](https://help.vtex.com/pt/docs/tutorials/associando-um-template-a-um-layout).\n6. Na seção **Properties** do novo layout, identifique o LID.\n7. Acesse a página com o problema e adicione o LID do layout criado como uma `QueryString` (`?` ou `&`) à URL na barra de endereços do navegador.\n\nCaso o problema não ocorra no layout nativo, indica que ocorre devido à customização. Se o problema persistir, abra um chamado ao [suporte da VTEX](https://supporticket.vtex.com/support)."}