When shoppers are forced to leave the page just to view or update their cart, it creates unnecessary friction. And the friction leads to lost sales. Every extra click or page load increases the chances that a customer will abandon their purchase.

Sliding Cart for EasyCommerce solves this by keeping your customers in the shopping flow. It adds a smooth, sliding side cart that gives instant access without interrupting their browsing experience.

Instead of redirecting users to a separate cart page, this addon lets customers view, update, and manage their cart right from the page they are on. A small icon at the top or bottom of your website gives prompt access to the cart, keeping it visible subtly and engagingly.

Why Use Sliding Cart for EasyCommerce?

• Simplifying the Shopping Journey: Streamline the path to purchase by removing unnecessary steps. With fewer clicks between finding a product and completing a purchase, shoppers are more likely to follow through.
• Reduce Cart Abandonment: Keep your customers engaged by providing real-time feedback and an intuitive interface. When shoppers feel informed and in control, they are more likely to complete their orders.
• Enhance User Experience: A smooth and user-friendly cart experience makes all the difference. Give shoppers a cart they enjoy using, with clear product displays and easy access to actions.
• Make the Cart Always Accessible: Let customers view and manage their cart from anywhere on your site. A sliding panel keeps it within reach without disrupting their browsing experience.
• Enjoy Real Time Cart Updates: Every change a shopper makes is instantly reflected in the cart. Whether they add an item, remove one, or change the quantity, the total updates on the spot with no need to reload the page.
• One Click Checkout: Once the cart is ready, customers can go straight to checkout with a single click. It is fast, simple, and keeps the momentum going.
• Optimized for All Devices: Whether on desktop, tablet, or mobile, the cart looks great and works smoothly. A responsive design ensures a consistent experience for every shopper.

Highlights & Features

Responsive Design: Works perfectly on desktop, tablet, and mobile devices

Real-time Updates: Cart contents update instantly when items are added or removed

Smooth Animations: Elegant slide-in/slide-out animations for better UX

Quantity Management: Easy quantity adjustment directly from the cart

Product Thumbnails: Visual product representation in the cart

Price Calculations: Automatic subtotal calculations

Checkout Integration: Direct links to the checkout process

Customization & Control

EasyCommerce Side Cart is designed to be flexible. Developers and store owners can customize styling, animations, triggers, and functionality.

1. Trigger the Slide Cart Programmatically

You can open the slide cart from any custom button or link by adding this class:

<button class="ec-slide-cart-class">View Cart</button>

Any element with this class will immediately activate the slide-in cart.

2. CSS Classes for Styling

You can override the cart’s appearance by targeting the following selectors in your theme or custom CSS:

/* Main cart wrapper */

.ec-slide-cart-wrapper

/* Background overlay */

.ec-slide-cart-overlay

/* Sliding panel box */

.ec-slide-cart-box

/* Cart header area */

.ec-slide-cart-header

/* Main scrollable content */

.ec-slide-cart-content

/* Individual cart item */

.ec-slide-cart-item

/* Cart footer section */

.ec-slider-cart-bottom

These control layout, spacing, colors, fonts, and animations.

3. JavaScript Events

The slide cart listens to EasyCommerce’s built-in events.  To execute custom scripts whenever the cart updates:

jQuery(document).on('easycommerce-cart-updated', function() {

console.log('Cart updated!');

});

How to Start with the EasyCommerce Sliding Cart

Step 1: Activate the Addon

First, go to EasyCommerce → Addons and turn on the Sliding Cart addon.

Step 2: Add the Cart Trigger

Next, choose the element that should open the sliding cart, like a menu item, button, or cart icon. Simply add the CSS class ec-slide-cart-class to that element. For menu items, enable “CSS Classes” in Screen Options and insert the class there.

Step 3: Test the Sliding Cart

Finally, visit your site and click the trigger to make sure the sliding cart opens smoothly and everything works as expected.