The Smart Cart settings page can be found on the left hand navigation bar by clicking on "Smart Cart". Below is a list of all of the available settings and short descriptions. These settings can all be manipulated on the fly via the Rebuy object. In order to view the settings object on a merchants site you can run window.Rebuy.SmartCart.settings in the console. Adjusting these settings with JavaScript and the Smart Cart or Cart events, developers are able to provide amazing functionality beyond the standard settings available in the app.

const SmartCart = window.Rebuy.SmartCart;

👍

Very Helpful

At the bottom we have our advanced setting which contain JavaScript callbacks for various actions of the Smart Cart. Event listeners for other Rebuy events can be added into these callbacks as you will see in the example.

Live Mode

When live mode is enabled this means that the Smart Cart will be live on the merchants site and running as the cart drawer solution for that site. When live mode is not enabled, this means that the Smart Cart can be viewed in Rebuys preview mode. Preview mode can be turned on by clicking the "Preview" link which will open the merchants site in Rebuy's preview mode. You will see a flag across the bottom of the site to notify you that you are now in preview mode.

855855
SmartCart.settings.preview_mode;

Announcement Bar

The announcement bar will display messages at the top of the Smart Cart. If there are multiple messages they will rotate through a carousel. This carousel is powered by Flickity.js.

843843
SmartCart.settings.announcement_bar;

Free Shipping Bar

The Free Shipping bar is a visual display that will notify customers how far they are away from free shipping. The copy can be changed to use this for any desired purpose such a a free gift with purchase instead of free shipping.

There is also the ability to use presentment currencies if the merchant has this set up in their Shopify admin.

Also, sometimes merchants offer free shipping for subscription products. So if that is enabled, then as soon as a subscription product has been added to the cart the bar will display the Shipping Reached Label.

The Only Available for Certain Countries checkbox will expand a text input that accepts comma separated country codes.

837837

This can be adjusted dynamically in order to add multiple rules as shown in the example below. When wrapped in the "rebuy:cart.change" event we are able to listen for changes to the cart and subtotal to change to a new threshold and push customers to spend more to get a free gift. In this case we need to use the raw endraw tags so that the double curly braces do not get parsed via liquid.

document.addEventListener('rebuy:cart.change', function(event){
  const settings = window.Rebuy.SmartCart.settings;
    const cartTotal = window.Rebuy.Cart.cart.total_price;
    if (cartTotal >= 5000) {
        settings.free_shipping.minimum = 7000;
        settings.language.free_shipping_remaining = "Free shipping acheived! Spend {% raw %}{{remaining_amount}}{% endraw %} more for a <b>FREE GIFT!</b>";
    } else {
        settings.free_shipping.minimum = 5000;
        settings.language.free_shipping_remaining = "You are {% raw %}{{remaining_amount}}{% endraw %}away from <b>FREE SHIPPING!</b>";
    }
});
SmartCart.settings.free_shipping;

Switch to Subscription

The Switch to Subscription setting enables a button and select dropdown group. If a customer adds a onetime item that has a subscription option then they can click on the switch to subscription button to "Upgrade" to subscription. Then they can adjust the shipping intervals via the dropdown.

847847
SmartCart.settings.switch_to_subscription;

Cart Cross-Sells Widgets

This makes it very easy to add cross selling ability to the Smart Cart. You can just click on the "Create Cart Flyout Widget" button and enable that widget. Clicking on the widget will take you to the settings page for that widget where merchants can customize the look and adjust the data source.

848848
SmartCart.settings.cross_sells;

Language

The main point to note here is the ability to add a link in the empty cart message. Typically merchants will use this to navigate to a collections page of popular products.

833833
SmartCart.settings.language;

Discount

This feature allows customers the ability to add a Shopify discount code and see the discount that they would receive upon checkout. This feature makes a request to checkout in order to confirm the validity of the discount code as well as the discount associated with that code.

841841
SmartCart.settings.discount;

Checkout, View Cart and Continue Shopping buttons

The button selections at the bottom of the Smart Cart. Navigate straight to checkout, go to the cart page or continue shopping which closes the Smart Cart.

843843
SmartCart.settings.checkout_button;
SmartCart.settings.language.checkout_label;

SmartCart.settings.view_cart_button;
SmartCart.settings.language.view_cart_label;

SmartCart.settings.language.continue_shopping_label;

Disable Cart Page

This setting makes it so that cart page cannot be accessed. If this setting is enabled, when Rebuy loads in the user will instead be redirected to the home page and the Smart Cart will open for them to now adjust or view their cart items as needed.

839839
SmartCart.settings.disable_cart_page;

Payment Installments

If the merchant uses a payment provider like AfterPay they can display a message of how much the purchase would cost with X amount of payments. The terms URL is a link that is used to allow the customer to check on the terms of using this payment provider.

835835
SmartCart.settings.installments;

Theme Selectors

Theme selectors accept CSS style notation in order to update the cart quantity or subtotal whenever the cart changes so that the stores theme and the Smart Cart are in sync.

🚧

Selects all elements

Make sure that you target a specific class of id here as this uses a querySelectorAll("p"); type of functionality and will manipulate all elements. (i.e. if you are to simple place a "p" in one of these fields then all "p"/paragraph tags will be adjusted on cart change)

844844
SmartCart.settings.selectors;

Product Form Redirect

839839
SmartCart.settings.product_form_redirect;

Terms and Conditions

When enabled this will provide a checkbox this the terms text in which customers have to accept before they are allowed to continue to checkout.

837837
SmartCart.settings.terms;

Custom Code

This text input accepts custom HTML which can be used to create one off Smart Cart apps. Script tags can also be added in to provide functionality via JavaScript.

842842

Apps

840840

Advanced

The advanced settings contains Smart Cart attribution tracking which tracks all products that have been purchased through the Smart Cart. When disabled Rebuy will not track products that have been managed by the Smart Cart.

The Event Callbacks give you the ability to add custom JavaScript through the lifecycle of the Smart Cart and pass in the Smart Cart instance where you can adjust settings dynamically and according to custom logic as desired.

752752

These callbacks can be extremely helpful to provide a custom experience. In the example below, we are adding an event listener for Rebuy Cart Change within the Ready callback to either display or hide the Smart Cart announcement bar.

const shouldDisplayAnnouncement = () => {
  const Cart = window.Rebuy.Cart
  const announcementBar = document.querySelector("#rebuy-smart-cart-announcement-bar");
  console.log('rebuy:cart.change event', Cart); 
  if (Cart.cart.item_count > 1) {
    announcementBar.style.visibility = "hidden";
  } else {
    announcementBar.style.visibility = "visible";
  }
}

document.addEventListener('rebuy:cart.change', function (event) { 
    shouldDisplayAnnouncement();
});

shouldDisplayAnnouncement();
22622262