Hello Everyone,
I need help changing the backgroundcolor in the middle in Your cart to a different color. I’ve been searching but couldn’t find any topic that help
Any input is appreciated!
Thank you,
Can you share your store link?
Yes,
It’s below
@MinhDuy ,
Add this CSS in your Online Store → Themes → Edit code → Assets → base.css file
.page-width.section-template--17689824788669__cart-items-padding, #shopify-section-template--17689824788669__cart-footer,#shopify-section-template--17689824788669__cart-items {
background: #f3c299;
}
It will looks this, later you can change the color by editing color code.
I built and tested on your cart
1. Open the code editor
- Online Store, then Themes.
- On your theme, click the … button, then Edit code.
2. Open base.css
- In the left list, open the Assets folder and click base.css.
3. Paste this at the very bottom, then Save
.shopify-section:has(.cart-items),
.shopify-section:has(.cart__footer) {
background-color: #f3c299;
}
4. Pick your own colour
- Change #f3c299 to any colour code you like.
Replace the cart rule you added with this, keeping your own colour:
.shopify-section:has(cart-items),
.shopify-section:has(.cart__footer) {
background-color: #f3c299;
}
The only change from before is that .cart-items became cart-items, with the dot removed. Change #f3c299 to your colour.
Tested on your cart: with the dot the empty middle stayed white, without it it takes your colour, and the full cart still works.
Thank you so much for your help! It fixed and I’m good now