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

# Upcart x Replo criador de páginas de destino

> Este artigo explica como configurar o Replo para abrir o drawer do Upcart quando um produto é adicionado ao carrinho.

O Replo é um poderoso criador de páginas de destino, mas seu comportamento padrão de "Add to Cart" redireciona para a página de carrinho da Shopify. Isso interrompe a experiência pretendida do Upcart, que usa um drawer deslizante.

Com um simples trecho de JavaScript, você pode fazer o Replo notificar o Upcart quando um produto é adicionado, mantendo o cliente na mesma página e abrindo o drawer imediatamente.

Isso mostra como o JavaScript pode ser usado não apenas para a integração com o Upcart, mas também para personalizações mais amplas do carrinho na sua loja.

***

<div id="why-this-integration-matters">
  ## Por que essa integração é importante
</div>

Por padrão, o Replo suporta vários comportamentos após adicionar ao carrinho:

* Redirecionar para a página de carrinho da Shopify
* Redirecionar para o checkout
* Permanecer na página (sem interação com o drawer)

O Upcart não abre automaticamente, a menos que você o acione explicitamente. Essa configuração garante que o drawer abra logo após o clique no botão "Add to Cart" do Replo.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Passo 1: abra a página do produto no Replo
</div>

1. Abra sua página de produto ou de destino no editor do Replo
2. Selecione o botão **Add to Cart** no layout da página
3. Na barra lateral direita, clique na aba **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Aba Interactions do editor do Replo adicionando uma interação On Click ao botão Add to Cart" />

<div id="step-2-add-a-second-interaction">
  ## Passo 2: adicione uma segunda interação
</div>

1. Confirme que o botão já usa a interação **Add Product to Cart**
2. Clique no ícone `+` abaixo de **On Click**
3. Na lista de ações, selecione **Run JavaScript**
4. No campo de código, cole o seguinte:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   Isso diz ao Upcart para abrir o drawer assim que o produto for adicionado ao carrinho.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Passo 3: desative o redirecionamento do Replo para a página do carrinho
</div>

1. Selecione novamente a interação **Add Product to Cart**
2. Desative a opção **Go to cart after?**

Isso impede que o Replo redirecione para a página de carrinho da Shopify, o que ignoraria completamente o drawer do Upcart.

<div id="step-4-preview-and-publish">
  ## Passo 4: visualize e publique
</div>

1. Clique em **Preview** no Replo para testar a interação
2. Adicione um produto ao carrinho e confirme que o drawer do Upcart abre automaticamente
3. Depois de confirmar, clique em **Publish Page** para publicar as alterações

***

<div id="notes">
  ## Observações
</div>

* Essa configuração deve ser aplicada a **cada página** em que você usar Replo + Upcart juntos
* A função `window.upcartRegisterAddToCart();` vem da API pública do Upcart e funciona sem instalações de código adicionais
* Isso funciona tanto na versão mobile quanto na versão desktop das páginas do Replo

<div id="notes-2">
  # **Observações**
</div>

O Replo agora deve parar de redirecionar para a página de carrinho da Shopify e, em vez disso, notificar o Upcart quando um item for adicionado ao carrinho.

Atenção: você precisará concluir esse processo para cada página de produto que criar no Replo Landing Page Designer.