> ## 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.

# Por que o Upcart está sempre aberto?

> Este artigo descreve os passos de solução de problemas para determinar por que o Upcart está sempre aberto.

Se você está enfrentando um problema no Upcart em que o cart drawer permanece visível, seja no lado esquerdo da tela, seja aparecendo à direita ou abaixo da interface da loja, há duas causas possíveis, dependendo de você estar usando ou não um app de tradução.

<div id="the-cart-appears-on-the-right-side-or-overlays-the-product-page-interface">
  # O carrinho aparece no lado direito ou sobrepõe a interface da página do produto.
</div>

Esse problema geralmente aparece como mostrado no desktop (destacado à direita):

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-storefront-product-cart-drawer.gif?s=de0cfb039a5110314e2bcc670570edce" alt="Página de produto da loja com o cart drawer do Upcart preso aberto sobrepondo o lado direito" width="1108" height="1080" data-path="images/upcart/always-open-storefront-product-cart-drawer.gif" />

Você precisará inserir um pequeno script nas configurações de HTML do Upcart para corrigir esse problema.

Siga estes passos:

1. No seu admin da Shopify, vá para **Upcart > Cart Editor > Settings**
2. Em Custom HTML, **selecione o menu suspenso HTML Location > Scripts (Before load)** <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-custom-html-location-dropdown.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=5fecf8bcf00491e70d62ced4d76a10d8" alt="Menu suspenso de localização do Custom HTML do Upcart com Scripts Before Load destacado na parte inferior" width="1099" height="766" data-path="images/upcart/always-open-custom-html-location-dropdown.png" />
3. Copie e cole o seguinte código:
   ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <script>  
       window.onload = () => {  
           const upcartHTML = document.getElementById("upCart");  
           document.body.append(upcartHTML);  
       }  
   </script>
   ```
   É assim que suas configurações de HTML personalizado devem ficar no Upcart: <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-custom-html-editor-scripts.gif?s=90eee20f5741281f86afa26f06acbad0" alt="Editor de Custom HTML do Upcart definido como Scripts Before Load com o script window.onload append colado" width="2748" height="1080" data-path="images/upcart/always-open-custom-html-editor-scripts.gif" />
4. Role até o topo e clique em **Save**. Depois de salvar as alterações no Upcart, pode levar até um minuto para que elas entrem em vigor.

<div id="why-does-this-happen">
  ### Por que isso acontece?
</div>

Quando o Upcart carrega, esperamos que ele apareça fora da tela, à direita da página da loja. No entanto, certos temas de loja e apps de terceiros da Shopify podem alterar o layout da página, incluindo o posicionamento do Upcart. Como resultado, o Upcart pode carregar em uma posição diferente, causando um bug visual em que ele fica visível o tempo todo. Implementar as alterações de código acima reposicionará o Upcart, restaurando seu comportamento original.

<div id="additional-steps">
  ## **Passos adicionais**
</div>

Se você estiver percebendo alguma cintilação durante a etapa de carregamento da página pelo Upcart, também pode tentar aplicar algumas alterações de CSS para ocultar o cart drawer. Lembre-se: **isso também ocultará o Upcart na página de prévia**.

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.upcartPopupShow [class*="styles_CartPreview__right__"] {  
    width: 100%;  
    max-width: 440px;  
}  
  
[class*="styles_CartPreview__right__"] {  
    width: 0px;  
    max-width: 440px;  
}
```

Você encontrará o editor na aba **Custom CSS** em **Settings** (atrás de **More settings** caso não caiba na linha de abas). Cole o código acima lá:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-custom-css-editor-rules.gif?s=a982b2ed16933ade7b8b47d2e1671fcc" alt="Editor de Custom CSS do Upcart com regras definindo a largura do painel direito do CartPreview para ocultar o drawer" width="2552" height="1080" data-path="images/upcart/always-open-custom-css-editor-rules.gif" />

<div id="cart-is-stuck-on-the-left">
  # O carrinho está preso à esquerda
</div>

Isso geralmente é causado por um app de tradução traduzindo configurações do Upcart que deveriam permanecer em inglês.

O Upcart armazena certas configurações como palavras em inglês em metafields da Shopify. Por exemplo, a configuração de posição do carrinho é armazenada como "right" ou "left". Se um app de tradução alterar "right" para "droite" em francês, o Upcart não consegue entender a instrução e assume por padrão o canto superior esquerdo da tela, permanecendo aberto permanentemente.

**Nem todos os metafields devem ser traduzidos**

Existem dois tipos de metafields do Upcart:

* **Campos de texto**, como rótulos de botões ou mensagens de recompensa, são seguros para traduzir
* **Configurações de comportamento**, como a posição do carrinho ou a direção dos upsells, devem permanecer em inglês

Traduzir configurações de comportamento fará o Upcart quebrar.

**A correção**

1. Abra seu app de tradução e encontre a seção de **metadados da loja** ou **metafields**
2. Examine os metafields do Upcart e remova quaisquer traduções em campos relacionados a comportamento, como `cartPosition` e `upsellsDirection`
3. Atualize sua loja e o carrinho deverá voltar à posição correta

**Nota:** o Upcart agora tem suporte integrado a traduções, o que evita esse problema completamente. Se você ainda não configurou as traduções, recomendamos usar esse recurso. Veja [Traduções do carrinho](/pt/upcart/cart_translations) para mais detalhes.