Some themes and apps provide a built-in cart experience that isn't a full page - these carts usually slide out from somewhere on the page after a product is added, instead of redirecting to a different page.

Using a slide-out cart / cart drawer / custom mini cart

Some themes and apps provide a built-in cart experience that isn't a full page - these carts usually slide out from somewhere on the page after a product is added, instead of redirecting to a different page.

To use a slide-out cart in a Replo page, there are usually two steps:

1. Make sure your Add Product to Cart interaction has both "redirect to cart" and "redirect to checkout" disabled

2. Depending on the theme or cart app you'r using, you generally need to trigger the cart to slide out via Javascript. To do this, Add a Run Javascript interaction and make sure it triggers after the Add Product to Cart interaction.

   

   The Javascript will need to refresh the cart contents and open the cart - what Javascript you run will depend on your theme or app.

Example Run Javascript Configurations

Below is a non-exhuastive list of Run Javascript snippets we've found that work today. Generally it's best to consult the cart app or theme's documentation (or if you have a custom developed theme, the developer who wrote it) to find this right Run Javascript snippet to run. If that or the below documentation doesn't help, Replo support is always here to help.

Cart Apps

Rebuy

Rebuy Personalization Engine has a great SmartCart with tons of features. Usually, Rebuy's SmartCart doesn't need any additional configuration to open when a product is added to the cart - as long as neither "Redirect to Checkout" or "Redirect to Cart" is checked, the smart cart should open. If for whatever reason you need the Javascript, it's very simple:

Rebuy.SmartCart.show()

Learn more about Rebuy on Replo's Rebuy Integration docs.

Monster Upsells

Monster Upsells offers a very customizable slide-out cart.

 window.monster_refresh();

Slide-Cart & Cart Upsells

Slide-Cart offers a simple and powerful slide-out cart.

window.SLIDECART_UPDATE();
window.SLIDECART_OPEN();

Native Theme Carts

You can verify the theme in use by running window.Shopify.theme in Dev Tools > Console anywhere on the store.

Flex Theme

Shopify.theme.jsAjaxCart.showDrawer()
Shopify.theme.jsAjaxCart.updateView()

Focal Theme

fetch("/cart.js")
.then(res => res.json())
.then(cart => document.documentElement.dispatchEvent(
     new CustomEvent('cart:refresh', {
          bubbles: true,
          detail: { cart: cart, openMiniCart: true }
    })
))

Dawn Theme

fetch("/cart/update.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
        updates: {},
        sections: ["cart-drawer", "cart-icon-bubble"]
    })
}).then((res) => res.json()).then((cartData) => {
    document.querySelector("cart-drawer").renderContents(cartData);
    document.querySelector("cart-drawer.drawer").classList.remove("is-empty");
});

Impact Theme

const cartDrawerSlide = document.querySelector("#cart-drawer");
if (cartDrawerSlide) {
  cartDrawerSlide._onCartRefresh().then(() => cartDrawerSlide.show());
}

3rd Party Theme Carts

Smart Theme

If you use Platter's Smart Theme:

window.cart.add(null, true);