> ## 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 creador de páginas de destino

> Este artículo explica cómo configurar Replo para abrir el cajón de Upcart cuando se añade un producto al carrito.

Replo es un potente creador de páginas de destino, pero su comportamiento predeterminado de "Add to Cart" redirige a la página del carrito de Shopify. Esto interrumpe la experiencia prevista de Upcart, que utiliza un cajón deslizante.

Con un sencillo fragmento de JavaScript, puedes indicarle a Replo que notifique a Upcart cuando se añade un producto, manteniendo al cliente en la misma página y abriendo el cajón de inmediato.

Esto demuestra cómo JavaScript puede usarse no solo para la integración con Upcart, sino también para una personalización más amplia del carrito en tu tienda.

***

<div id="why-this-integration-matters">
  ## Por qué es importante esta integración
</div>

De forma predeterminada, Replo admite varios comportamientos posteriores al carrito:

* Redirigir a la página del carrito de Shopify
* Redirigir al checkout
* Permanecer en la página (sin interacción con el cajón)

Upcart no se abre automáticamente a menos que lo actives explícitamente. Esta configuración garantiza que el cajón se abra justo después de hacer clic en el botón "Add to Cart" de Replo.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Paso 1: Abre la página del producto en Replo
</div>

1. Abre tu página de producto o de destino en el editor de Replo
2. Selecciona el botón **Add to Cart** en el diseño de la página
3. En la barra lateral derecha, haz clic en la pestaña **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Pestaña Interactions del editor de Replo añadiendo una interacción On Click al botón Add to Cart" />

<div id="step-2-add-a-second-interaction">
  ## Paso 2: Añade una segunda interacción
</div>

1. Confirma que el botón ya usa la interacción **Add Product to Cart**
2. Haz clic en el ícono `+` debajo de **On Click**
3. En la lista de acciones, selecciona **Run JavaScript**
4. En el campo de código, pega lo siguiente:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   Esto le indica a Upcart que abra el cajón en cuanto el producto se añada al carrito.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Paso 3: Desactiva la redirección de Replo a la página del carrito
</div>

1. Selecciona nuevamente la interacción **Add Product to Cart**
2. Desactiva el interruptor **Go to cart after?**

Esto evita que Replo redirija a la página del carrito de Shopify, lo que omitiría por completo el cajón de Upcart.

<div id="step-4-preview-and-publish">
  ## Paso 4: Previsualiza y publica
</div>

1. Haz clic en **Preview** en Replo para probar la interacción
2. Añade un producto al carrito y confirma que el cajón de Upcart se abre automáticamente
3. Una vez confirmado, haz clic en **Publish Page** para publicar los cambios

***

<div id="notes">
  ## Notas
</div>

* Esta configuración debe aplicarse en **cada página** donde uses Replo + Upcart juntos
* La función `window.upcartRegisterAddToCart();` proviene de la API pública de Upcart y funciona sin instalaciones de código adicionales
* Esto funciona tanto en la versión móvil como en la de escritorio de las páginas de Replo

<div id="notes-2">
  # **Notas**
</div>

Replo ahora debería dejar de redirigir a la página del carrito de Shopify y, en su lugar, notificar a Upcart cuando se añade un artículo al carrito.

Ten en cuenta: deberás completar este proceso para cada página de producto que diseñes en Replo Landing Page Designer.