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
Topic summary
A user wants to add a visible remove button to their cart using the Symmetry theme.
Current Situation:
- The remove functionality already exists but is hidden in the cart drawer
- It’s visible on the cart page but not in the drawer
Proposed Solution:
Add custom CSS code to unhide the remove button:
- Navigate to Customizer → Theme Settings → Custom CSS
- Insert CSS to display the cart-item__remove element with
display: inline-block - Optional: Add alignment styling for better visual presentation
Alternative Approaches Mentioned:
- Editing the cart-template.liquid file directly
- Adding a remove button via Liquid code with onclick event
- Multiple users offered direct collaboration to implement changes
A demo screenshot was provided showing the working implementation with the CSS solution applied.
To add a remove button in the cart for the Symmetry theme, you’ll need to edit the cart template. Here’s how:
- Go to your Shopify admin and click on Online Store > Themes.
- Find the Symmetry theme and click on Actions > Edit code.
- In the Sections folder, open the
cart-template.liquidfile (it might also be called something likecart.liquid). - Look for the line where the product items are listed. You should see a loop that starts with
{% for item in cart.items %}. - Within that loop, add a remove button by inserting the following code snippet, usually as a button or link: liquid Remove
- You may need to style it with CSS to match your theme.
- Save your changes & test
Hi @Tony1701 ,
Can I send you a collaborator invitation? Because this needs a lot of changes and I will help you check it
Hi @Tony1701
Could you share your product page link so I can check?
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:
1 Like