> ## 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.
# Open the drawer from a page builder
> A Cart SDK use case for making Replo, PageFly, GemPages, and custom add-to-cart buttons open the Aftersell Cart drawer.
Aftersell intercepts add-to-cart on standard Shopify product forms. Landing page builders often add to the cart their own way, using a JavaScript call instead of a form submit, so the item lands in the cart but the drawer stays shut, or the shopper gets redirected to `/cart`.
## The fix, in one line
After the builder's add-to-cart finishes, tell the cart to refetch and open:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
Add this as a **second action** on the button, after the builder's own "add to cart", and turn off the builder's "go to cart" or "redirect after add" option.
Try [`open_on_background_add`](#the-no-code-option-first) first, since it often solves this without touching the button at all.
## The no-code option first
Aftersell detects adds it didn't handle itself in two ways. Both run at all times — they are attached together at boot and neither suppresses the other, so one add can be announced by both — and each announcement applies the open rule independently:
* **On the wire.** Aftersell watches for requests to Shopify's cart endpoints. If the add followed a real click or keypress within about three seconds, it counts as shopper-driven, and the drawer opens according to your normal **Open cart when an item is added** setting. Any builder that adds through Shopify's Ajax cart API (`/cart/add.js`) lands here, which is the common case — so try your button first, it may already work with no changes at all.
* **[Shopify's standard cart events](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** An add announced this way is always treated as a *background* add, whether or not a shopper clicked. Background adds don't open the drawer unless you opt in:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```
Paste that into **Cart settings → Custom script → Initialization**. If the drawer now opens after your builder's add button, you're done, with no per-button work, and it covers every page.
`open_on_background_add` also covers adds with no shopper gesture at all — another app or script writing to the cart. Turn it on only if you want those to pop the drawer too.
If neither path opens the drawer, fall back to the explicit call below.
## Per-builder setup
### Replo
1. Open your page in the Replo editor and select the **Add to Cart** button.
2. In the right sidebar, open the **Interactions** tab.
3. Under **On Click**, click `+` and choose **Run JavaScript**.
4. Paste:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Select the **Add Product to Cart** interaction again and turn **Go to cart after?** off.
6. Preview, confirm the drawer opens, then publish.
Repeat on each page that has an add-to-cart button.
### PageFly and GemPages
Both let you attach custom JavaScript to a button click or add a custom code element to the page. Use the same snippet, wired to run after the builder's add-to-cart action, and disable any "redirect to cart" setting on the button.
### Your own button
If you're adding to the cart yourself, skip the round trip and use the SDK's own action, which updates the cart and can open the drawer in one step:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-add-button').addEventListener('click', () => {
window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
window.aftersell.cart.actions.open();
});
});
```
Use `refresh()` only when something *else* changed the cart and you need Aftersell to catch up:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
fetch('/cart/add.js', { method: 'POST', /* … */ })
.then(() => window.aftersell.cart.actions.refresh())
.then(() => { window.aftersell.cart.actions.open(); });
```
## When the builder's button should bypass Aftersell entirely
Sometimes the opposite is true: a form needs its own flow, and Aftersell's interception gets in the way. Exempt just that form:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
form.hasAttribute('data-skip-aftersell')
);
```
Then add `data-skip-aftersell` to the form. This is better than [`skip_add_to_cart_interceptor`](/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), which turns interception off for every form on the page.
Simpler still, if you can edit the form's markup: add the class **`aftersell-cart-skip-atc`** to the `