• If you are not a developer or do not have access to a developer, please check out our Smart Cart guides! We are unable to find the update functions for you, but able to assist with Smart Cart trouble shooting! This is a cart flyout powered by Rebuy that is super easy to use! Developer required for this!

To start: Navigate to Online Store > Cart > and create a new Cart Flyout Widget. Name it accordingly! We have set our favorite layout by default but you can edit this.

Next, set the layout (as a starting point) to the following settings:

  • Layout: Products to show 2

  • For all screen sizes, set Display Style to: Line

  • Deselect Display as carousel

  • Set grid columns to 1

Next, your goal is to find the file in your theme that is the cart drawer/cart flyout file

To do this, one way is to export your theme, and use a local code editor to find this file.

To know what you're searching for, please first use the following trick. In your web browser of choice, select the webpage inspector tool, point to an item in your cart, and use this to direct your search for finding out which file is the cart drawer file.

Now, add the Rebuy widget div code like this:

Find your themes update function!

We've compiled a list of some of the most common themes update functions to use in Rebuy Event listeners. Generally, you can just include the method found in the widget's advanced settings. These methods vary from theme to theme as versions are different at times! We recommend reaching out to the themes developers if you are unable to find it. A good starting place is by searching for /cart/add in the downloaded theme file.

  • Remember: These are just ones that we have found over time and do not have access to all themes functions! If you are choosing not to use the smart cart, the responsibility is to search these out for yourself! You got this, Hacker!

Theme Name: "Impulse"

Search for the buildCart function in theme.js and add this to the bottom of the function below the if (openDrawer === true) condition.

$(`[data-rebuy-id="xxxx"]`).remove(); $(".ajaxcart__product").last().append('<div data-rebuy-id="xxxx"></div>'); if(window.Rebuy){ Rebuy.init(); }

Add this to the cart drawer widget's "add" event listener under "Advanced" in the widget settings:

$(‘body’).trigger(‘added.ajaxProduct’); //If that doesn't work try this one $('body').trigger('added.ajaxProduct', this.$addToCart); //Or this one! document.dispatchEvent(new CustomEvent('ajaxProduct:added', { detail: { product: product } }));

Theme Author: "Shopify + BentoSMB"

CartJS.addItem(Rebuy.Cart.cart);

Theme Name: "Prestige"

Add the below code snippet to the "Add" callback of the widgets Advanced settings.

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', { bubbles: true }));

Used the script below in theme.liquid in order to get the widget to render when initial add to cart and adding to cart from widget. There may be a better way so use with caution…

<script> var initRebuy = () => { setTimeout(function(){ Rebuy.init(); }, 500); }; document.addEventListener('rebuy:cart.change', function(event){ initRebuy(); }); </script>

Theme Name: "Turbo"

In app.js.liquid, find function refreshCart(cart) and add this event listener above it:

document.addEventListener("rebuy:cart.change", function() { refreshCart(Rebuy.Cart.cart); });

//Placement for some Turbo themes has been in the header.liquid file after the tag. <ul class="cart_items js-cart_items"></ul> //You may need to remove properties/attributes in header.liquid {% assign first_character = p.first | slice: 0 %} {% unless p.last == blank or first_character == '_' %} {{ p.first }}: {{ p.last }} {% endunless %} //As well as in app.js within the refreshCart function block if(item.properties) { $.each(item.properties, function(title, value) { if (value && title[0] != '_' && value[0] != '_') { cart_items_html += '<div class="line-item">' + title +': ' + value + '</div>'; } }); }

For more on removing cart properties checkout this doc: Hiding cart properties.

Theme Name: "Impulse"

$('body').trigger('added.ajaxProduct');

Theme Name: "Parallax"

//Find function refreshCart(cart) in app.js.liquid and add this event listener above this method. document.addEventListener('rebuy.add', function () { refreshCart(Rebuy.Cart.cart) });

Theme Name: "Modular"

Cart.buildCart(Rebuy.Cart.cart); /*Find the buildCart Method, potentially in shop.js.liquid. May or may not need the setTimout method but this is has worked so that the widget did not get removed when adding to cart.*/ setTimeout(() => { $("#CartItems").append('<div data-rebuy-id="XXXX"></div>'); Rebuy.init(); }, 500);

Theme Name: "Motion"

document.dispatchEvent(new CustomEvent('cart:build')); //And added this to the bottom of cart-drawer.liquid <script> document.addEventListener('cart:updated', function(event){ Rebuy.init() }); </script> //Alternative: $('body').trigger('added.ajaxProduct', Rebuy.Cart.cart); //Include in the buildCart() function if needed: setTimeout(function(){ $(".drawer__scrollable").append('<div data-rebuy-id="XXXX"></div>'); Rebuy.init(); }, 750)

Hey Senior Cart Drawer

//1) This serves to update the Slide Cart. if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.updateSlideCart(); } //2) This is to open and update the Slide Cart. if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.getSlideCart(); } //3) Initialize the event for the Add to Cart button if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.addToCartSlideCart(); } //4) Initialize the event for the Quick Buy Button if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.getQuickBuyButton(); }

Theme Name: "Super Theme VB (Vasta) Theme"

VastaShop.Cart.getAllItems() .then(function(cart, status) { if ('success' === status) { VastaShop.Cart.current = cart; render_cart_drawer(VastaShop.Cart.current, jQuery('.list-products'), 0, ''); update_shipping_bar(cart.total_price, cart.item_count); } }).catch(function(err) { console.log(err); });

Theme Name: "Starter"

$.get('/pages/mini-cart', response => $('[js-mini-cart]').replaceWith(response)); var productAddedToCart = new CustomEvent('cart.productAdded', { bubbles: true }); document.body.dispatchEvent(productAddedToCart)


Did this answer your question?