How to set up the Cart Drawer for your store

This article will walk you through the steps on how to add the Cart Drawer add-on to your web store in minutes. 

About the Cart Drawer

A Cart Drawer or a Side Cart is a good replacement for your cart page because customers do not need to navigate to the cart page whenever they want to access the shopping cart's details.


Using a Cart Drawer can minimize your store's cart abandonment rate by providing a better consumer experience.


Add the Cart Drawer to your pages with EcomSolid

Step 1: From the EcomSolid Dashboard, head to the Theme Editor.

Step 2:  Access the Library from the top bar of the Editor Page.



Next, navigate to Add-ons > Sales and conversion and look for the Cart Drawer add-on.



Hit “Add” to insert it to your Editor.


Please note that you can add a maximum of one Cart Drawer add-on for your entire store. If you try to insert more than one, there will be an error message below.



Configure the add-on settings

After that, you will find the Cart Drawer on the add-on list of the left sidebar.  Click on the add-on to start configuring the settings.




Preview Cart Drawer: By enabling this option, you will see the preview version of your Cart Drawer.

Position: There’re two positions for you to choose for your Cart Drawer - on the left or the right of your pages.

Open When Clicking 'Shopping Cart' Button: Toggle on this option to allow visitors to open the Cart Drawer when clicking on the Shopping Cart button.

Sticky: You can choose a section to be sticky when scrolling through. 





Compared price: Toggle on the switch to enable the compared price next to the price after discount.

Preview Item Properties: Enable this switch to turn on the preview for the item properties.

Preview Empty Cart: Turn on this switch to see how your Cart Drawer looks when it’s empty.




Toggle on the corresponding switch to enable the different components of the order summary area.




Toggle on the corresponding switch to enable the different components of the checkout area.




Turn on this option to see the pop-up preview when an item is removed from the cart. 



You will see a list of atoms included in the Cart Drawer add-on. Each atom represents one element of your section.  Hover over the atom, click on the Eye icon to hide/show the atom then.


To edit the setting of each element of the Cart Drawer, click on each atom to reveal its configuration on the left sidebar. 



That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.

Was this helpful?