Skip to main content
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.

​
Por qué es importante esta integración

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.

​
Paso 1: Abre la página del producto en Replo

  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

​
Paso 2: Añade una segunda interacción

  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:
    Esto le indica a Upcart que abra el cajón en cuanto el producto se añada al carrito.

​
Paso 3: Desactiva la redirección de Replo a la página del carrito

  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.

​
Paso 4: Previsualiza y publica

  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

​
Notas

  • 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

​
Notas

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.