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.
Hey @MinhDuy ,
If you’re referring to the white background behind the “Your cart” section in the middle of the page, this is typically controlled by your theme’s CSS.
You can try adding custom CSS in Online Store → Themes → Edit code → Assets → base.css (or your theme’s main stylesheet):
.template-cart {
background-color: #f5f1e8; /
}
.cart-items,
.cart__footer {
background-color: transparent;
}
If that doesn’t change the background, it’s likely that your theme uses different CSS selectors. In that case, use your browser’s Inspect tool (F12) to identify which element is applying the background color.
Also, if you can let us know which Shopify theme you’re using (for example, Dawn, Craft, Taste, etc.), the community can provide the exact selector for your theme.
If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.
Thank You !
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.
HI @MinhDuy
If you mean the middle/main section of the cart drawer or cart page, the easiest way is usually with a small CSS override.
Go to Shopify Admin → Online Store → Themes → … → Edit code, then open your theme’s base.css (or theme.css ) and add this at the bottom:
/* Cart middle section background */
.cart-drawer__inner {
background-color: #f5f1e8;
}
Replace #f5f1e8 with whatever color you want.
If you’re referring to the full cart page rather than the cart drawer, the selector will be different depending on the theme. If you share which Shopify theme you’re using (or a screenshot of the cart), I can give you the exact selector/code for it.
Thank you so much for your help! It fixed and I’m good now