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:
- Make sure your Add Product to Cart interaction has both "redirect to cart" and "redirect to checkout" disabled
- 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 Javascript Snippet
Below is a non-exhuastive list of 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 Javascript to run. If that and/or the below 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 doeson'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.
fetch("/cart.js")
.then(res => res.json())
.then(cart => {
window.monster_atc({id: cart.items?.[0].id, quantity: 0});
window.openCart();
})
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"); fetch('/?section_id=cart-drawer').then(d=>d.text()).then(text=>{ const sectionInnerHTML = new DOMParser().parseFromString(text, 'text/html'); const cartFormInnerHTML = sectionInnerHTML.getElementById('cart-drawer').innerHTML; cartDrawerSlide.innerHTML = cartFormInnerHTML; }); setTimeout(function(){ cartDrawerSlide.setAttribute('open','') }, 500);
3rd Party Theme Carts
Smart Theme
If you use Platter's Smart Theme
window.cart.add(null, true);