Skip to main content
Replo는 강력한 랜딩 페이지 빌더이지만, 기본 “Add to Cart” 동작은 Shopify 장바구니 페이지로 리디렉션돼요. 이는 슬라이드 아웃 드로어를 사용하는 Upcart의 의도된 경험을 방해해요. 간단한 JavaScript 스니펫으로 제품이 추가될 때 Replo가 Upcart에 알리도록 하여, 고객이 같은 페이지에 머물고 드로어가 즉시 열리게 할 수 있어요. 이는 JavaScript가 Upcart 연동뿐만 아니라 스토어의 광범위한 장바구니 커스터마이징에도 사용될 수 있음을 보여줘요.

​
이 연동이 중요한 이유

기본적으로 Replo는 여러 가지 장바구니 추가 후 동작을 지원해요:
  • Shopify 장바구니 페이지로 리디렉션
  • 결제(checkout)로 리디렉션
  • 페이지에 머무르기(드로어 상호작용 없음)
Upcart는 명시적으로 트리거하지 않으면 자동으로 열리지 않아요. 이 설정을 하면 Replo의 “Add to Cart” 버튼을 클릭한 직후 드로어가 열려요.

​
1단계: Replo에서 제품 페이지 열기

  1. Replo 편집기에서 제품 또는 랜딩 페이지를 여세요
  2. 페이지 레이아웃에서 Add to Cart 버튼을 선택하세요
  3. 오른쪽 사이드바에서 Interactions 탭을 클릭하세요
Add to Cart 버튼에 On Click 상호작용을 추가하는 Replo 편집기 Interactions 탭

​
2단계: 두 번째 상호작용 추가하기

  1. 버튼이 이미 Add Product to Cart 상호작용을 사용하고 있는지 확인하세요
  2. On Click 아래의 + 아이콘을 클릭하세요
  3. 동작 목록에서 Run JavaScript를 선택하세요
  4. 코드 입력란에 다음을 붙여넣으세요:
    이 코드는 제품이 장바구니에 추가되는 즉시 Upcart가 드로어를 열도록 해요.

​
3단계: Replo의 장바구니 페이지 리디렉션 비활성화하기

  1. Add Product to Cart 상호작용을 다시 선택하세요
  2. Go to cart after? 토글을 비활성화하세요
이렇게 하면 Replo가 Shopify 장바구니 페이지로 리디렉션하여 Upcart 드로어를 완전히 우회하는 것을 방지해요.

​
4단계: 미리보기 및 게시하기

  1. Replo에서 Preview를 클릭하여 상호작용을 테스트하세요
  2. 제품을 장바구니에 추가하고 Upcart 드로어가 자동으로 열리는지 확인하세요
  3. 확인이 끝나면 Publish Page를 클릭하여 변경 사항을 라이브로 반영하세요

​
참고 사항

  • 이 설정은 Replo + Upcart를 함께 사용하는 각 페이지에 적용해야 해요
  • window.upcartRegisterAddToCart(); 함수는 Upcart의 공개 API에서 제공되며 추가 코드 설치 없이 작동해요
  • 이 방법은 Replo 페이지의 모바일 및 데스크톱 버전 모두에서 작동해요

​
참고 사항

이제 Replo는 Shopify 장바구니 페이지로 리디렉션하지 않고, 상품이 장바구니에 추가될 때 Upcart에 알려요. 참고: Replo 랜딩 페이지 디자이너에서 디자인하는 각 제품 페이지마다 이 과정을 완료해야 해요.