How to add a remove button in cart (Symmetry theme)

[Tony1701]

Hello everyone,

I would love to add a remove button in cart (example below). My theme is SYMMETRY

Thanks in advance for your responses.

Tony

[Entaice]

To add a remove button in the cart for the Symmetry theme, you’ll need to edit the cart template. Here’s how:

1. Go to your Shopify admin and click on Online Store > Themes.
2. Find the Symmetry theme and click on Actions > Edit code.
3. In the Sections folder, open the `cart-template.liquid` file (it might also be called something like `cart.liquid`).
4. Look for the line where the product items are listed. You should see a loop that starts with `{% for item in cart.items %}`.
5. Within that loop, add a remove button by inserting the following code snippet, usually as a button or link: liquid <button class="remove-button" aria-label="Remove {{ item.product.title }}" onclick="removeItem({{ item.id }})">Remove</button> 
6. You may need to style it with CSS to match your theme.
7. Save your changes & test 

[namphan]

Hi @Tony1701,

Can I send you a collaborator invitation? Because this needs a lot of changes and I will help you check it

[Dan-From-Ryviu]

Hi @Tony1701 

Could you share your product page link so I can check?

[tim · Accepted solution]

Actually, the functionality is already there, but it's hidden in the cart drawer, though visible on the cart page.

Just need to unhide it.

What you need to do is to go to Customizer => Theme Settings => Custom CSS and add this:

/* show remove link in cart drawer */
cart-drawer .cart-item__remove {
  display: inline-block;
  float: right;
  margin-left: auto;
}

/* optional: better align remove link in drawer */
cart-drawer .cart-item__quantity {
  display: flex;
  align-items: center;
}

This is theme demo store with code added: