Looking for help to change color on "cart background color"

Topic summary

Goal: Change the right-side cart drawer background from black to a lighter color (white/grey/yellow) in the Colors theme; initial editor/CSS attempts failed.

Key steps and attempts:

  • A suggestion to add custom code in theme.liquid (above ) with a background hex (e.g., #d2d5d9) was tried but did not work.
  • Store URL shared for review: https://bon-isla.com/.

Working solution (CSS in Assets > base.css/style.css/theme.css):

  • Background color: .side-cart, .side-cart .side-cart-container .more { background: #f7df8d !important; } — replace with desired hex (e.g., white).
  • Text and borders on light background:
    • .side-cart *:not(button.btn.accent.cart__checkout) { color: black !important; }
    • .side-cart .side-cart-header, .side-cart .side-cart-container .more { border-color: black; }
  • Screenshots were shared to show results after each change.

Outcome and status:

  • Background color successfully updated; follow-up CSS provided to switch text to black and adjust borders when using a light background.
  • No further issues reported after the final CSS; discussion appears resolved.
Summarized with AI on December 30. AI used: gpt-5.

Ohh nice! ty! Have changed it and tried it out. If I want the background white I understand I can change the code you sent but if I want to change the color of the white text here, how do I do that?

1 Like