> ## 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 ランディングページビルダー

> この記事では、商品がカートに追加されたときに Upcart のドロワーが開くように Replo を設定する方法を説明します。

Replo は強力なランディングページビルダーですが、デフォルトの「Add to Cart」の挙動では Shopify のカートページにリダイレクトされます。これにより、スライド式のドロワーを使用する Upcart 本来の体験が中断されてしまいます。

シンプルな JavaScript スニペットを使えば、商品が追加されたときに Replo から Upcart に通知し、お客様を同じページにとどめたままドロワーをすぐに開くことができます。

これは、JavaScript が Upcart との連携だけでなく、ストアにおけるより幅広いカートのカスタマイズにも活用できることを示す好例です。

***

<div id="why-this-integration-matters">
  ## この連携が重要な理由
</div>

デフォルトでは、Replo はカート追加後の挙動として複数の選択肢をサポートしています。

* Shopify のカートページにリダイレクト
* チェックアウトにリダイレクト
* ページにとどまる（ドロワーの操作なし）

Upcart は明示的にトリガーしない限り自動では開きません。この設定により、Replo の「Add to Cart」ボタンがクリックされた直後にドロワーが開くようになります。

***

<div id="step-1-open-the-product-page-in-replo">
  ## ステップ 1: Replo で商品ページを開く
</div>

1. Replo エディターで商品ページまたはランディングページを開きます
2. ページレイアウト内の **Add to Cart** ボタンを選択します
3. 右側のサイドバーで **Interactions** タブをクリックします

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Replo エディターの Interactions タブで Add to Cart ボタンに On Click インタラクションを追加" />

<div id="step-2-add-a-second-interaction">
  ## ステップ 2: 2 つ目のインタラクションを追加する
</div>

1. ボタンにすでに **Add Product to Cart** インタラクションが設定されていることを確認します
2. **On Click** の下にある `+` アイコンをクリックします
3. アクションの一覧から **Run JavaScript** を選択します
4. コード入力欄に以下を貼り付けます。
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   これにより、商品がカートに追加されるとすぐに Upcart がドロワーを開くようになります。

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## ステップ 3: Replo のカートページへのリダイレクトを無効にする
</div>

1. もう一度 **Add Product to Cart** インタラクションを選択します
2. **Go to cart after?** トグルを無効にします

これにより、Replo が Shopify のカートページにリダイレクトして Upcart のドロワーを完全にスキップしてしまうことを防げます。

<div id="step-4-preview-and-publish">
  ## ステップ 4: プレビューして公開する
</div>

1. Replo で **Preview** をクリックしてインタラクションをテストします
2. 商品をカートに追加し、Upcart のドロワーが自動的に開くことを確認します
3. 確認できたら、**Publish Page** をクリックして変更を公開します

***

<div id="notes">
  ## 注意事項
</div>

* この設定は、Replo + Upcart を併用する**各ページ**に適用する必要があります
* `window.upcartRegisterAddToCart();` 関数は Upcart の公開 API によるもので、追加のコードのインストールなしで動作します
* Replo ページのモバイル版・デスクトップ版の両方で機能します

<div id="notes-2">
  # **注意事項**
</div>

これで、Replo は Shopify のカートページへのリダイレクトを行わなくなり、代わりに商品がカートに追加されたときに Upcart に通知するようになります。

ご注意: Replo Landing Page Designer でデザインする各商品ページごとに、この手順を実施する必要があります。