페이지 빌더에서 드로어 열기

Aftersell은 표준 Shopify 상품 폼의 장바구니 담기를 가로채요. 랜딩 페이지 빌더는 종종 폼 제출 대신 JavaScript 호출을 사용해 자체 방식으로 카트에 추가하기 때문에, 상품은 카트에 담기지만 드로어는 닫힌 채로 있거나 쇼핑객이 /cart로 리디렉션돼요.

한 줄로 해결하기

빌더의 장바구니 담기가 완료된 후, 카트에 다시 가져와서 열라고 지시하세요:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

빌더 자체의 “장바구니 담기” 이후 버튼의 두 번째 액션으로 추가하고, 빌더의 “카트로 이동” 또는 “추가 후 리디렉션” 옵션을 끄세요.

먼저 open_on_background_add를 시도해 보세요. 버튼을 전혀 건드리지 않고도 문제가 해결되는 경우가 많아요.

노코드 옵션 먼저

Aftersell은 자신이 처리하지 않은 추가를 두 가지 방식으로 감지해요. 둘 다 항상 실행되며 — 부팅 시 함께 연결되고 어느 쪽도 다른 쪽을 억제하지 않으므로 하나의 추가가 양쪽 모두에서 알려질 수 있어요 — 각 알림은 열기 규칙을 독립적으로 적용해요:

네트워크 요청 감시. Aftersell은 Shopify의 카트 엔드포인트로 향하는 요청을 감시해요. 추가가 실제 클릭이나 키 입력 후 약 3초 이내에 이루어졌다면 쇼핑객이 주도한 것으로 간주되어, 일반적인 Open cart when an item is added 설정에 따라 드로어가 열려요. Shopify의 Ajax 카트 API(/cart/add.js)를 통해 추가하는 모든 빌더가 여기에 해당하며, 이것이 일반적인 경우예요 — 그러니 먼저 버튼을 테스트해 보세요. 아무 변경 없이 이미 작동할 수도 있어요.
Shopify의 표준 카트 이벤트. 이 방식으로 알려진 추가는 쇼핑객의 클릭 여부와 관계없이 항상 백그라운드 추가로 처리돼요. 백그라운드 추가는 옵트인하지 않는 한 드로어를 열지 않아요:

window.aftersell.cart.configure({ open_on_background_add: true });

이 코드를 Cart settings → Custom script → Initialization에 붙여넣으세요. 이제 빌더의 추가 버튼 이후 드로어가 열린다면 끝이에요. 버튼별 작업이 필요 없고 모든 페이지에 적용돼요.

open_on_background_add는 쇼핑객의 제스처가 전혀 없는 추가도 포함해요 — 다른 앱이나 스크립트가 카트에 쓰는 경우요. 그런 경우에도 드로어가 열리길 원할 때만 켜세요.

두 경로 모두 드로어를 열지 못하면, 아래의 명시적 호출로 대체하세요.

빌더별 설정

Replo

Replo 에디터에서 페이지를 열고 Add to Cart 버튼을 선택하세요.
오른쪽 사이드바에서 Interactions 탭을 여세요.
On Click 아래에서 +를 클릭하고 Run JavaScript를 선택하세요.

다음을 붙여넣으세요:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

Add Product to Cart 인터랙션을 다시 선택하고 **Go to cart after?**를 끄세요.
미리보기에서 드로어가 열리는지 확인한 뒤 게시하세요.

장바구니 담기 버튼이 있는 각 페이지에서 반복하세요.

PageFly와 GemPages

둘 다 버튼 클릭에 커스텀 JavaScript를 연결하거나 페이지에 커스텀 코드 요소를 추가할 수 있어요. 같은 스니펫을 빌더의 장바구니 담기 액션 이후에 실행되도록 연결하고, 버튼의 “카트로 리디렉션” 설정을 비활성화하세요.

직접 만든 버튼

직접 카트에 추가하는 경우라면 왕복 과정을 건너뛰고, 카트를 업데이트하고 한 단계로 드로어를 열 수 있는 SDK 자체 액션을 사용하세요:

document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});

refresh()는 다른 무언가가 카트를 변경했고 Aftersell이 따라잡아야 할 때만 사용하세요:

fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

빌더 버튼이 Aftersell을 완전히 우회해야 할 때

때로는 그 반대가 필요해요: 폼에 자체 흐름이 필요한데 Aftersell의 가로채기가 방해가 되는 경우예요. 해당 폼만 제외하세요:

window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);

그런 다음 폼에 data-skip-aftersell을 추가하세요. 이 방법이 페이지의 모든 폼에 대해 가로채기를 끄는 skip_add_to_cart_interceptor보다 나아요. 폼의 마크업을 편집할 수 있다면 더 간단하게: <form>에 aftersell-cart-skip-atc 클래스를 추가하면 Aftersell이 건너뛰어요. 스크립트가 필요 없어요.

<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">

문제 해결

증상	가능성이 높은 원인
상품은 추가되었지만 드로어가 닫힌 채로 있음	빌더가 Shopify의 표준 카트 이벤트를 발생시키지 않아요. 명시적인 `refresh()` + `open()` 호출을 사용하세요.
쇼핑객이 `/cart`로 리디렉션됨	빌더의 “추가 후 카트로 이동” 옵션이 아직 켜져 있어요. 끄세요.
드로어가 열리지만 오래된 내용이 표시됨	`refresh()`가 resolve되기 전에 `open()`이 실행되었어요. 위와 같이 `.then()`으로 체이닝하세요.
아무 일도 일어나지 않음	카트 로드 전에 호출된 액션은 콘솔에 경고를 남기고 아무것도 하지 않아요. 버튼이 그렇게 일찍 클릭될 수 있다면 `window.aftersell.cart.ready().then(…)`으로 감싸세요.
어떤 페이지에서는 작동하지만 다른 페이지에서는 안 됨	대부분의 빌더는 인터랙션을 페이지별로 적용해요. 각 페이지에서 설정을 반복하세요.

호출이 아무 일도 하지 않는 것 같으면 window.aftersellCartDebugEvents를 확인하세요. SDK 실패는 throw되지 않고 내부에서 처리되기 때문이에요.

다음 단계

Configure: open_on_background_add와 기타 드로어 옵션.
Actions: refresh, open, addItem.
Hooks: 단일 폼 제외하기.

시작하기

홈 페이지

모범 사례

구매 후 업셀

장바구니

체크아웃 업셀 (Shopify Plus)

감사 페이지

제품 페이지 업셀

Rokt Thanks

전략

분석 및 추적

연동

Aftersell MCP

요금 및 계정

문제 해결

페이지 빌더에서 드로어 열기

한 줄로 해결하기

노코드 옵션 먼저

빌더별 설정

Replo

PageFly와 GemPages

직접 만든 버튼

빌더 버튼이 Aftersell을 완전히 우회해야 할 때

문제 해결

다음 단계

​한 줄로 해결하기

​노코드 옵션 먼저

​빌더별 설정

​Replo

​PageFly와 GemPages

​직접 만든 버튼

​빌더 버튼이 Aftersell을 완전히 우회해야 할 때

​문제 해결

​다음 단계

한 줄로 해결하기

노코드 옵션 먼저

빌더별 설정

Replo

PageFly와 GemPages

직접 만든 버튼

빌더 버튼이 Aftersell을 완전히 우회해야 할 때

문제 해결

다음 단계