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.
General
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.
CART AREA
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.
ORDER SUMMARY AREA
Toggle on the corresponding switch to enable the different components of the order summary area.
CHECKOUT AREA
Toggle on the corresponding switch to enable the different components of the checkout area.
REMOVE ITEM POPUP
Turn on this option to see the pop-up preview when an item is removed from the cart.
ATOMS
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.