An interesting question we get from Shopify stores is: Can I include a “clear cart” functionality in my cart pages? Often, customers must change the quantity of each line item to “0” in order to remove items from the cart and start over. Not a great experience. Having a “clear” option can make it simple for customers to reset a cart and start building it again. That’s especially useful for shops with customizable products.

Shopify has the ability to clear carts built in, but most themes don’t include a “clear cart” button. So, allowing customers to clear a cart with a single click will require us to add an “empty cart” button to your theme, pointing to mystore.com/cart/clear (where mystore.com becomes your store URL).

Let’s dive right in! 🌊

The default cart templates in most themes have the ability to change line item quantity and proceed to checkout. Some themes also have an “update cart” button.

I’m going to add another button here to empty the cart, which will require us to edit the code in your theme.

To modify your theme code, go to Online store > Themes and click Action > Edit code.

We’ll need to edit your cart template to add our new button after the {{ cart.general.title | t }} line of code. You’ll find this template file in the “Sections” folder of your theme, and it’s usually called cart-template.liquid. The title code is typically near the top and pretty easy to find.

After {{ cart.general.title | t }}, add a new line, then insert this code:

<a href="/cart/clear" class="btn button" style="margin-bottom:10px;">Empty cart</a>

A quick note: styling of this button depends on your theme. I’m using a couple common CSS classes that should style this button. However, if your button looks like a plain link instead of a button, I’d ask your theme author how to modify that HTML above to get some button styling applied. 🙂

Once this snippet is added to your cart template, save the file, and have a look at your cart page. You’ll now see an “Empty cart” button in your cart page! 🎉

If you’re happy with this output, you can stop here, and give your new button a spin–it will completely empty the cart upon click.

[optin-monster-shortcode id=”bcblovfj62lauqyznhza”]

Looking to customize this output a bit? You can do so, but note that it requires you to be familiar with HTML to find a good spot for your empty cart button. I’d recommend copying and pasting your current template to a text file in case anything goes wrong so you can easily undo your changes.

I prefer to place this button near the “checkout” action, or right before the cart totals. So, I could find the totals by searching for {{ cart.total_price | money }} and inserting my button HTML here.

That will move the output of my button after the cart table, but before the cart totals:

Each theme’s cart layout is different, so I’d encourage you to play with a few locations to see which is best.