how to change cart background color? be yours theme

Topic summary

A Shopify store owner using the Be Yours theme seeks to customize their cart drawer styling, specifically wanting to change the background from cream to white and the checkout button to black.

Initial Solution:

  • A community helper (Ellie-BOGOS) provides CSS code to be added to the theme.liquid file above the </body> tag
  • The code targets .mini-cart__inner for background color and .mini-cart__footer .button-container .button for button styling

Troubleshooting:

  • Initial implementation fails due to incorrect placement and conflicting <style> tags
  • Through iterative debugging with screenshots, issues are identified: extra <style> tags need removal and missing closing brackets (}}) in existing media query code
  • After corrections, the solution successfully works

Additional Requests Addressed:

  • Rainbow progress bar changed to black using .free-shipping__progress--success:after CSS
  • Request for variant edit functionality in cart is noted as requiring advanced custom code or third-party app
  • Further font and text color customization requests are deferred to a new thread per community guidelines

Status: Primary styling issues resolved; user directed to create separate post for additional customization questions.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Thank you! It works now, would you know how to change the rainbow line to black?

1 Like