> ## 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 landing page builder

> Cet article explique comment configurer Replo pour ouvrir le tiroir Upcart lorsqu'un produit est ajouté au panier.

Replo est un puissant créateur de pages d'atterrissage, mais son comportement « Add to Cart » par défaut redirige vers la page du panier Shopify. Cela interrompt l'expérience Upcart prévue, qui utilise un tiroir coulissant.

Avec un simple extrait de code JavaScript, vous pouvez indiquer à Replo de notifier Upcart lorsqu'un produit est ajouté, ce qui permet au client de rester sur la même page et d'ouvrir immédiatement le tiroir.

Cela montre comment JavaScript peut être utilisé non seulement pour l'intégration d'Upcart, mais aussi pour une personnalisation plus large du panier sur votre boutique.

***

<div id="why-this-integration-matters">
  ## Pourquoi cette intégration est importante
</div>

Par défaut, Replo prend en charge plusieurs comportements après l'ajout au panier :

* Redirection vers la page du panier Shopify
* Redirection vers le paiement
* Rester sur la page (aucune interaction avec le tiroir)

Upcart ne s'ouvre pas automatiquement sauf si vous le déclenchez explicitement. Cette configuration garantit que le tiroir s'ouvre juste après le clic sur le bouton « Add to Cart » de Replo.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Étape 1 : ouvrez la page produit dans Replo
</div>

1. Ouvrez votre page produit ou votre page d'atterrissage dans l'éditeur Replo
2. Sélectionnez le bouton **Add to Cart** dans la mise en page
3. Dans la barre latérale de droite, cliquez sur l'onglet **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Onglet Interactions de l'éditeur Replo ajoutant une interaction On Click au bouton Add to Cart" />

<div id="step-2-add-a-second-interaction">
  ## Étape 2 : ajoutez une seconde interaction
</div>

1. Confirmez que le bouton utilise déjà l'interaction **Add Product to Cart**
2. Cliquez sur l'icône `+` sous **On Click**
3. Dans la liste des actions, sélectionnez **Run JavaScript**
4. Dans le champ de code, collez ce qui suit :
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   Cela indique à Upcart d'ouvrir le tiroir dès que le produit est ajouté au panier.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Étape 3 : désactivez la redirection de Replo vers la page du panier
</div>

1. Sélectionnez à nouveau l'interaction **Add Product to Cart**
2. Désactivez l'option **Go to cart after?**

Cela empêche Replo de rediriger vers la page du panier Shopify, ce qui contournerait entièrement le tiroir Upcart.

<div id="step-4-preview-and-publish">
  ## Étape 4 : prévisualisez et publiez
</div>

1. Cliquez sur **Preview** dans Replo pour tester l'interaction
2. Ajoutez un produit au panier et confirmez que le tiroir Upcart s'ouvre automatiquement
3. Une fois la confirmation faite, cliquez sur **Publish Page** pour mettre les modifications en ligne

***

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

* Cette configuration doit être appliquée à **chaque page** où vous utilisez Replo + Upcart ensemble
* La fonction `window.upcartRegisterAddToCart();` provient de l'API publique d'Upcart et fonctionne sans installation de code supplémentaire
* Cela fonctionne pour les versions mobiles et de bureau des pages Replo

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

Replo devrait maintenant cesser de rediriger vers la page du panier Shopify et notifier Upcart à la place lorsqu'un article est ajouté au panier.

Veuillez noter : vous devrez effectuer ce processus pour chaque page produit que vous concevez dans Replo Landing Page Designer.