> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Como corrigir o layout quebrado do editor de carrinho por HTML inválido

> Corrigindo a interface do app caso ela apareça quebrada depois de adicionar código personalizado.

<div id="overview">
  # Visão geral
</div>

Se um HTML inválido ou quebrado for adicionado ao campo Custom HTML do Cart Editor, ele pode quebrar o layout e tornar a interface do editor inutilizável. Este guia mostra como corrigir temporariamente o layout para que você possa remover o código quebrado com segurança e restaurar a funcionalidade completa.

<div id="what-causes-the-issue">
  ## O que causa o problema
</div>

Esse problema geralmente ocorre quando um lojista:

* Insere tags `<style>` ou `<script>` sem a estrutura adequada
* Deixa tags HTML sem fechamento ou incompatíveis
* Adiciona conteúdo que quebra o layout ao campo Custom HTML

Como resultado, o Cart Editor fica ilegível ou inutilizável e pode impedir os usuários de editar ou até de rolar a página.

<div id="temporary-fix-using-developer-tools">
  ## Correção temporária usando as ferramentas de desenvolvedor
</div>

Siga estes passos para corrigir temporariamente o layout usando as Developer Tools do seu navegador e assim conseguir acessar o campo Custom HTML.

<div id="step-1-open-devtools">
  ## Passo 1: Abra o DevTools
</div>

1. Abra o Cart Editor no app Upcart
2. Clique com o botão direito em qualquer lugar da página e selecione **Inspect**, ou pressione:

   * `Cmd + Option + I` (Mac)
   * `Ctrl + Shift + I` (Windows)

<div id="step-2-find-the-broken-layout-container">
  ## Passo 2: Encontre o contêiner de layout quebrado
</div>

1. Na aba **Elements** do DevTools, clique na ferramenta de seleção (canto superior esquerdo do DevTools)
2. Passe o mouse sobre o layout do Cart Editor e encontre a seção destacada em verde à esquerda do painel de configurações. Ela deve estar rotulada como:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Suba seis níveis na hierarquia até chegar a:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Passo 3: Desative a posição fixa
</div>

1. Com `.Polaris-Frame__Content` selecionado, olhe na aba **Styles**
2. Encontre a propriedade `position: fixed` e desmarque-a

Isso deve destravar a página e permitir que você role pelo layout novamente.

<div id="remove-the-invalid-html">
  ## Remova o HTML inválido
</div>

Agora que o layout está acessível novamente:

1. Role até o campo **Custom HTML**
2. Procure qualquer HTML quebrado ou CSS incorporado que possa ter causado o problema

Exemplo do que costuma quebrar o layout:

```
<style>  
  body {  
    background: red;  
  }  
</style>
```

1. Copie o conteúdo para outro lugar como backup e depois exclua-o
2. Salve suas alterações

<div id="confirm-its-fixed">
  ## Confirme que foi corrigido
</div>

Depois de salvar, o Cart Editor deve carregar normalmente de novo. Se o problema persistir, verifique novamente se há tags inválidas restantes ou entre em contato com o lojista para confirmar o que foi adicionado.

<div id="best-practices-to-prevent-this-issue">
  ## Boas práticas para evitar esse problema
</div>

* Insira apenas HTML completo e válido
* Evite adicionar blocos `<style>` inline diretamente nos locais de HTML
* Use a seção **Custom CSS** em vez de adicionar CSS nos campos de HTML
* Sempre visualize suas alterações no modo Sandbox se tiver dúvidas