> ## 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 장바구니 페이지로 리디렉션
* 결제(checkout)로 리디렉션
* 페이지에 머무르기(드로어 상호작용 없음)

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="Add to Cart 버튼에 On Click 상호작용을 추가하는 Replo 편집기 Interactions 탭" />

<div id="step-2-add-a-second-interaction">
  ## 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 랜딩 페이지 디자이너에서 디자인하는 각 제품 페이지마다 이 과정을 완료해야 해요.