i wanna change colour of cart drawer

Store Design
, , , , , , ,

Topic summary

A user wants to customize their Shopify cart drawer buttons with specific styling:

Requirements:

  • View Cart button: transparent background (like the checkout button)
  • Checkout button: background color #9ACA3D with text color #303030

Solutions Provided:

Two developers offered CSS code solutions:

  1. Tech_Coding’s approach: Add CSS in theme.liquid before </body> tag targeting .buy-buttons--compact classes

  2. websensepro’s approach: Add CSS to theme.css/base.css file with more specific selectors, including border styling for the View Cart button

Both solutions include:

  • Code snippets with exact CSS targeting the cart buttons
  • Screenshots showing the expected results
  • Step-by-step implementation instructions

Status: Multiple working solutions provided. One additional developer requested store URL/password for a more tailored solution. The issue appears resolved pending the original poster’s implementation and confirmation.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

1] Want View Cart Button Background To Be transparent like checkout button

2] Want Checkout Button Background To Be #9ACA3D & Text Colour To be #303030

URL; https://www.mostlymo.com/pages/home

Screenshot 2025-01-08 121301.png
Screenshot 2025-01-08 121301.png1917×907 137 KB

2

Hello @Emiway

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.buy-buttons--compact .button--secondary, button.button.button--xl.button--outline { background: #9ACA3D !important; color: #303030 !important; }

RESULT:

Tech_Coding_0-1736319298534.png
Tech_Coding_0-1736319298534.png643×567 36 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hi @Emiway

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
form.buy-buttons.buy-buttons--compact a.button.button--xl.button--secondary {
    background: unset !important;
    border: 1px solid black !important;
    color: black !important;
}
form.buy-buttons.buy-buttons--compact button.button.button--xl.button--outline {
    background: #9ACA3D !important;
    color: #303030 !important;
}

Result:

websensepro_0-1736322781280.png
websensepro_0-1736322781280.png630×486 88.8 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

4

Hello there,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?