cart cart

How to add an empty cart button to Shopify

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! 🌊

Adding a new button to your theme

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.

Shopify default cart view

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

If you’re not comfortable editing code yourself, we recommend getting help from Storetasker for small projects like this.

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

Shopify edit theme 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>

Shopify: add empty cart button 1

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. smile

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! 🎉

Shopify add empty cart button output

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.

Shopify cart emptied

Taking it further

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.

Shopify: add empty cart button 2

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

Shopify add empty cart button output 2

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

Beka Rice
Beka is the head of product at Jilt. She works on app improvements, integration plugins, helping merchants improve recovery campaigns, and shares tutorials on reducing abandonment or improving recovery on our blog.

Leave a Reply

Your email address will not be published. Required fields are marked *